ajax 请求方法

return: Promise

使用指南

全局使用 (推荐)

//main.jsimport {req} from './common/request/request.js';    //文件路径请换成本地路径req.baseuUrl = 'https://www.easy-mock.com/mock/5ca6ec41215a7b66ff10343d/'       //设置公共请求前面部分,全局生效//或者这样req.defaultReq.url='https://www.easy-mock.com/mock/5ca6ec41215a7b66ff10343d/'   //只针对于请求接口req.defaultReq.baseData={      //设置公共参数，默认为空，设置此参数后每次发送请求都会带上此参数    token:'000-000-000-000-player125'}req.defaultReq.beforeFinish=(res)=>{    if(res.data.userOut){      //演示代码,需要退出，不做返回标记此次ajax作废        uni.reLaunch({            url: 'login?userOut=true'        });    }else{        return res    //返回最终response数据    }}req.defaultReq.errorHandler=(err,next)=>{    console.log(err)    next(err);}req.defaultReq.type = "POST";   //这是默认请求为postVue.prototype.$req = req;   //挂载到原型上

局部使用

import {req} from './common/request/request.js';const res = await req.ajax({    path: "https://www.easy-mock.com/mock/5ca6ec41215a7b66ff10343d/example/query",})

代码演示

1.简单使用

const res = await this.$req.ajax({    path: "example/query",  //可以是完整路径也可以后半部分})console.log(res);

2.带请求提示

const res = await this.$req.ajax({    path: "example/query",    title: "正在加载",  //false 则不显示})console.log(res);

3.带参数请求

const res = await this.$req.ajax({    path: "example/query",    title: "正在加载",    data:{        name:'hhyang'    }})console.log(res);

4.单个请求带拦截

const res = await this.$req.ajax({    path: "example/query",    title: "正在加载",    data:{        name:'hhyang'    },    abortFun: (info,bt) => {        bt.abort();    },})console.log(res);

5.监听请求完成，无论失败还是成功。当然可以使用 then、catch、finally 详细

const res = await this.$req.ajax({    path: "example/query",    title: "正在加载",    data:{        name:'hhyang'    }，    finishFun:finsh => { //使用await 用此方法即可监听到        console.log(finsh)    }})console.log(res);   //成功之后的返回，如要捕捉失败请使用try、catch

6.携带额外参数，不会上传。可提供给开发者分辨某个请求 详细

const res = await this.$req.ajax({    path: "example/query",    title: "正在加载",    data:{        name:'hhyang'    }，},'我是额外参数1'，'我是额外参数2')console.log(res);   //成功之后的返回，如要捕捉失败请使用try、catch//或者这样const res = await this.$req.ajax({    path: "example/query",    title: "正在加载",    data:{        name:'hhyang'    }，},{    parmas1:'我是额外参数1',    parmas2:'我是额外参数2',})console.log(res);   //成功之后的返回，如要捕捉失败请使用try、catch

7.捕捉请求错误

try{    const res = await this.$req.ajax({        path: "example/query",        title: "正在加载",        data:{            name:'hhyang'        },        abortFun: (info,bt) => {            bt.abort();        },    })    console.log(res);}catch(e){    console.log(e)      //请求发生了错误}

8.自定义 header、dataType、responseType、type

const res = await this.$req.ajax({    path:"example/query",    type:"POST",    header:{        'content-type': 'application/x-www-form-urlencoded'    },    dataType: 'json',    responseType: 'text',})    console.log(res);

9.设置全局请求前拦截

//延迟函数let timeout=function(time=3000){    return new Promise(resolve=>{        setTimeout(()=>{            resolve();        },time)    })}//同步写法req.defaultReq.beforeSend=res=>{    if(res.data.token!=''){ //验证token存在的情况下才放行        return res    }}//同步写法req.defaultReq.beforeSend=res=>{    delete res.data;        //删除传递的参数选项    return res;             //返回新的请求参数}//异步写法req.defaultReq.beforeSend=async res=>{    await timeout();         //3秒后执行删除，再返回    delete res.data;         //删除传递的参数选项    return res;              //返回新的请求参数}

10.设置全局响应后拦截

//延迟函数let timeout=function(time=3000){    return new Promise(resolve=>{        setTimeout(()=>{            resolve();        },time)    })}//同步写法req.defaultReq.beforeFinish=res=>{    if(res.data.userOut){   //退出登录不返回数据，标记此次请求无效        uni.reLaunch({            url: 'login?userOut=true'        });    }else{        return res;    }}//同步写法req.defaultReq.beforeFinish=res=>{    return {msg:'这是我自定义的数据'};             //返回新的响应数据}//异步写法req.defaultReq.beforeFinish=async res=>{    await timeout();         //3秒后执行    return {msg:'这是我自定义的数据'};             //返回新的响应数据}

11.设置全局错误拦截

//每次ajax错误请求都会走这个方法  你可以选择调用next 来抛出错误df.defaultReq.errorHandler=(err,next)=>{    if(err.status==10002){          console.log('请求前抛出的错误哦')    }    console.log(err)    next(err);  //抛出错误}//更多错误码请查阅下方

全局 Options

baseuUrl 修改时会生效：上传，下载接口的公共部分。

全局 defaultReq

详细

ajax 参数

ajax 错误码