ajax 请求方法

return: Promise

使用指南

全局使用 (推荐)

//main.js
import {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";   //这是默认请求为post
Vue.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

全局 defaultReq 设置完成后针对全局有效，ajax 方法默认在你没传值的情况下优先采用的全局参数。可以通过向 ajax 方法传递参数覆盖全局的详细

ajax 参数

ajax 错误码