axios学习笔记

JavaScript

发布日期: 2019-05-23

文章字数: 604

阅读时长: 2 分

axios：一个基于promise的ajax类库

引入axios.js这个文件之后，向外暴露了一个对象axios

发送get请求

axios.get(url,{params：{}}).then(res=>{}).catch(mse=>{})//第二个参数是option配置对象。params就是请求传递的参数，发送请求的配置参数也写在这里
//请求成功就进入then里面的函数，返回的结果是一个对象res，服务器返回的数据都在res.body里面存着。如果在发起请求的时候传入了参数，那么传入的参数在res.config.params里面。
//请求失败就进入catch，返回结果msg是请求失败的原因。

发送post请求

axios.post(url,{}，{})//第二个参数就是post请求要传递的参数，第三个参数是配置参数
    .then(res=>{}).//请求成功就进入then里面的函数，返回的结果是一个对象res，服务器返回的数据都在res.body里面存着。如果在发起请求的时候传入了参数，那么传入的参数在res.config.data里面。
catch(mse=>{})//请求失败就进入catch，返回结果msg是请求失败的原因。

axios.all

function getUserAccount(){
    return axios.get('xxxx');
}
function getUserPromission(){
    return axios.get('xxxx');
}

axios.all([getUserAccount,getUserPromission]).then(res=>{
    console.log(res)//这里只有当前面数组中的两个请求都成功后才会进入后面的then，这里的res是一个数组，里面的值一次是这两个请求的返回结果。
})
//或者这样使用
axios.all([getUserAccount（）,getUserPromission（）]).then(axios.spread(function (acct, perms) {
    //acct是第一个请求的返回结果，perms是第二个请求的返回结果
  }))

拦截器

在请求或者相应被then或者catch处理之前拦截他们.在成功之前先执行拦截器的success方法，将成功的方法的返回值传给自己定义的请求成功的方法去处理。

//请求拦截器
axios.interceptor.request.use(function(config){
    //在发送请求之前做什么
    return config
}，function(error){
    //对请求错误做什么
    return Promise.reject(error);
})

//相应拦截器
axios.interceptor.response.use(function(success){
    //对成功的响应做些什么
    return success;
},function(error){
    //对失败的响应做些什么
    retur Promise.reject(error);
})


//移除拦截器

const myInterceptor = axios.interceptor.response.use();

axios.interceptor.response.eject(myInterceptor);