用axios封装一个jq版的ajax

  * 封装axios,减少学习成本,参数基本跟jq ajax一致
  * @param {String} type            请求的类型,默认post
  * @param {String} url             请求地址
  * @param {String} time            超时时间
  * @param {Object} data            请求参数
  * @param {String} dataType        预期服务器返回的数据类型,xml html json ...
  * @param {Object} headers         自定义请求headers
  * @param {Function} success       请求成功后,这里会有两个参数,服务器返回数据,返回状态,[,data res]
  * @param {Function} error     发送请求前
  * @param return 
import axios from 'axios';
var Rxports={
      ajax:function (opt){

        let self = this;
        var opts = opt || {};

        if (!opts.url) {
            alert('请填写接口地址');
            return false;
        }
        let obj={
            method: opts.type || 'post',
            url: opts.url,
            headers: opts.headers || {
                'Content-Type':'application/x-www-form-urlencoded',
            },
            // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
            // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
            // baseURL:'https://www.precise.com/www/',
            baseURL:self.apiURI(),
            timeout: opts.time || 10*1000,
            responseType: opts.dataType || 'json',
        }
        opts["data"] = opts["data"]||{};
        //进行数据深度拷贝。防止修改数据时将原始数据污染;
        let str = JSON.stringify( opts["data"]);

        opts["data"] = JSON.parse(str);
        opts["data"]["token"] = opts["data"]["token"] || self.getToken("token")["token"];
        //this.Log(opts["data"]["token"]);
        if( opts.type =='post'){
            obj.data = qs.stringify(opts.data || {})
        }else{
           obj.params = opts.data || {}
        }
        axios(obj).then(function(res){

            if(res.status == 200 ){
                if(opts.success){
                    opts.success(res.data,res);
                    if(res.data.t && res.data.t.length>0){
                        modal.show(res.data.t,self.getToken('token')['token'],self.apiURI());
                        console.log('ajax',res.data.t)
                    }
                }
            }else{
                if (data.error) {
                    opts.error(error);
                }else{
                    console.log('网络故障' + data.error);
                }
            }
        }).catch(function (error){
            console.log('回调处理错误',error);
            if (opts.error) {
                opts.error(error);
            }else{
                // console.log('网络故障');
            }
        });

    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于Axios、Vue和TypeScript的封装Ajax请求示例: ```typescript import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'; import { Vue } from 'vue-property-decorator'; // 定义全局配置 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 5000; // 定义请求拦截器 axios.interceptors.request.use((config: AxiosRequestConfig) => { // 在请求发送前做一些处理,例如添加token等 const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { return Promise.reject(error); }); // 定义响应拦截器 axios.interceptors.response.use((response: AxiosResponse) => { // 在响应返回后做一些处理,例如判断是否登录失效等 const data = response.data; if (data.code === 401) { Vue.prototype.$message.error('登录失效,请重新登录!'); localStorage.removeItem('token'); location.href = '/login'; } return response; }, (error) => { return Promise.reject(error); }); // 定义请求方法 export const ajax = { get<T>(url: string, params?: any): Promise<T> { return axios.get(url, { params }).then((res: AxiosResponse) => res.data); }, post<T>(url: string, data?: any): Promise<T> { return axios.post(url, data).then((res: AxiosResponse) => res.data); }, put<T>(url: string, data?: any): Promise<T> { return axios.put(url, data).then((res: AxiosResponse) => res.data); }, delete<T>(url: string, params?: any): Promise<T> { return axios.delete(url, { params }).then((res: AxiosResponse) => res.data); } }; ``` 使用时可以直接引入`ajax`对象调用相应的请求方法: ```typescript import { ajax } from './ajax'; // 发送GET请求 ajax.get('/users', { page: 1, limit: 10 }).then((data) => { console.log(data); }).catch((error) => { console.error(error); }); // 发送POST请求 ajax.post('/users', { name: '张三', age: 18 }).then((data) => { console.log(data); }).catch((error) => { console.error(error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值