axios进阶

一只风衣喵

已于 2024-06-11 10:29:19 修改

阅读量196

点赞数 5

分类专栏：前端文章标签：前端 javascript

于 2024-06-11 10:26:36 首次发布

本文链接：https://blog.csdn.net/qq_43682797/article/details/139592074

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Axios特性

支持promise API
拦截请求和响应

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>

<script>
import axios from 'axios'
// 拦截器：在请求或响应被处理前拦截它们
// 请求拦截器、响应拦截器
export default {
  name: "get",
  created() {
    //请求拦截器
    axios.interceptors.request.use(config => {
      //在发送请求前做些什么
      return config;
    }, err => {
      //在请求错误的时候做些什么
      return Promise.reject(err);
    })

    //响应拦截器
    axios.interceptors.response.use(res => {
      //请求成功对响应数据做处理
      return res;
    }, err => {
      //响应错误做些什么
      return Promise.reject(err);
    })

    //取消拦截器(了解)
    let interceptors = axios.interceptors.request.use(config => {
      config.headers = {
        auth: true
      }
      return config;
    })
    axios.interceptors.request.eject(interceptors);

    //例子：登录状态（token:''） 需要登录的接口
    let instance = axios.create({});
    instance.interceptors.request.use(config => {
      config.headers.token = '';
      // config.headers = {//这种写法会覆盖掉headers中的其他参数，导致headers中只包含token这一个参数，所以不建议这种写法
      //   token: ''
      // }
      return config;
    }, err => {
      return Promise.reject(err);
    })

    //移动端弹窗
    let instance_phone = axios.create({});
    instance_phone.interceptors.request.use(config => {
      $('#modal').show();
      return config;
    })
    instance_phone.interceptors.response.use(res => {
      $('#modal').hide();
      return res;
    })
  }
}
</script>

<style scoped>

</style>

转换请求数据和响应数据
取消请求

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>

<script>
import axios from 'axios'
// 取消请求
export default {
  name: "get",
  created() {
    
    //取消请求：用于取消正在进行的http请求（作为了解）
    let rource = axios.CancelToken.source();
    axios.get('../../static/data.json', {
      cancelToken: rource.token
    })
      .then((res) => {
        console.log(res)
      })
    .catch((err) => {
      console.log(err)
    })
    //取消请求（message可选）
    rource.cancel('cancel http');

  }
}
</script>

<style scoped>

</style>

自动转换 JSON 数据
客户端支持防御 XSRF

axios.create(config)

axios.create(config) 对axios请求进行二次封装：

根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
新的 axios 只是没有 取消请求 和 批量请求 的方法，其它所有语法都是一致的
为什么要这种语法？

1. 需求，项目中有部分接口需要的配置与另一部分接口的配置不太一样

2. 解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求中

<template>
  <div>
    <div>mmmm</div>
  </div>
</template>

<script>
import axios from 'axios'
// axios 实例
// 后端接口地址有多个，并且超时时长不一样
export default {
  name: "get",
  created() {
    //创建axios实例1
    let instance = axios.create({//参数配置
      baseURL: 'http://localhost:8080',//请求的域名(或基本地址)
      timeout: 3000,//请求的超时时长(默认：1000毫秒(ms)，超过这个时长会报401超时)
      //url: '../../static/data.json',//请求的路径
      //method: 'get',//请求方法
      headers: {//设置请求头(给请求头添加一些参数)
        token: ''
      },
      //params: {id: 1},//请求参数拼接在URL上
      //data: {id: 1}//请求参数放在请求体
    })
    instance.get('../../static/data.json', {
      params: {
        id: 1
      }
    })
      .then((res) => {
        console.log(res)
      })
    //假如有两个域名或设置超时时长不一样，你可以再创建一个axios实例2
    let instance2 = axios.create({
      baseURL: 'http://localhost:9090',
      timeout: 5000
    })
    instance2.get('../../static/data.json', {
      params: {
        id: 1
      }
    })
      .then((res) => {
        console.log(res)
      })

    //1.axios全局配置
    axios.defaults.baseURL = 'http://localhost:8080';
    axios.defaults.timeout = 3000;
    //2.axios实例配置
    let instance = axios.create();
    instance.defaults.timeout = 4000;
    //3.axios请求配置
    instance.get('../../static/data.json', {
      timeout: 6000
    })
      .then((res) => {
        console.log(res)
      })
    //优先级从低到高：1.axios全局配置 < 2.axios实例配置 < 3.axios请求配置
  }
}
</script>

<style scoped>

</style>

axios 的选项参数说明

axios({
    url:'/user',                            //  `url`是服务器链接，用来请求用
    method:`get`,                           //  `method`是发起请求时的请求方法
    baseURL:'http://some-domain.com/api/',  //  `baseURL`如果`url`不是绝对地址，那么将会加在其前面。当axios使用相对地址时这个设置非常方便

    transformRequest:[function(data){       //  `transformRequest`允许请求的数据在传到服务器之前进行转化。只适用于`PUT`,`GET`,`PATCH`方法。数组中的最后一个函数必须返回一个字符串，一个`ArrayBuffer`,或者`Stream`
        //依自己的需求对请求数据进行处理
        return data;
    }],
    transformResponse:[function(data){      //  `transformResponse`允许返回的数据传入then/catch之前进行处理
        //依需要对数据进行处理
        return data;
    }],  
    headers:{'X-Requested-with':'XMLHttpRequest'},//`headers`是自定义的要被发送的头信息
    params:{ //`params`是请求连接中的请求参数，必须是一个纯对象，或者URLSearchParams对象
        ID:12345
    },
    paramsSerializer: function(params){//`paramsSerializer`是一个可选的函数，是用来序列化参数，例如：（https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
        return Qs.stringify(params,{arrayFormat:'brackets'})
    },
    data:{//`data`是请求提需要设置的数据，只适用于应用的'PUT','POST','PATCH'，请求方法。当没有设置`transformRequest`时，必须是以下其中之一的类型（不可重复？）：-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams。仅浏览器：FormData,File,Blob。仅Node：Stream
        firstName:'fred'
    },
    //`timeout`定义请求的时间，单位是毫秒。
    //如果请求的时间超过这个设定时间，请求将会停止。
    timeout:1000,
    //`withCredentials`表明是否跨域请求，
    //应该是用证书
    withCredentials:false //默认值
    //`adapter`适配器，允许自定义处理请求，这会使测试更简单。
    //返回一个promise，并且提供验证返回（查看[response docs](#response-api)）
    adapter:function(config){
        /*...*/
    },
    //`auth`表明HTTP基础的认证应该被使用，并且提供证书。
    //这个会设置一个`authorization` 头（header），并且覆盖你在header设置的Authorization头信息。
    auth:{
        username:'janedoe',
        password:'s00pers3cret'
    },
    //`responsetype`表明服务器返回的数据类型，这些类型的设置应该是
    //'arraybuffer','blob','document','json','text',stream'
    responsetype:'json',
    //`xsrfHeaderName` 是http头（header）的名字，并且该头携带xsrf的值
    xrsfHeadername:'X-XSRF-TOKEN'，//默认值
    //`onUploadProgress`允许处理上传过程的事件
    onUploadProgress: function(progressEvent){
        //本地过程事件发生时想做的事
    },
    //`onDownloadProgress`允许处理下载过程的事件
    onDownloadProgress: function(progressEvent){
        //下载过程中想做的事
    },
    //`maxContentLength` 定义http返回内容的最大容量
    maxContentLength: 2000,
    //`validateStatus` 定义promise的resolve和reject。
    //http返回状态码，如果`validateStatus`返回true（或者设置成null/undefined），promise将会接受；其他的promise将会拒绝。
    validateStatus: function(status){
        return status >= 200 &;&; stauts < 300;//默认
    },
    //`httpAgent` 和 `httpsAgent`当产生一个http或者https请求时分别定义一个自定义的代理，在nodejs中。
    //这个允许设置一些选选个，像是`keepAlive`--这个在默认中是没有开启的。
    httpAgent: new http.Agent({keepAlive:treu}),
    httpsAgent: new https.Agent({keepAlive:true}),
    //`proxy`定义服务器的主机名字和端口号。
    //`auth`表明HTTP基本认证应该跟`proxy`相连接，并且提供证书。
    //这个将设置一个'Proxy-Authorization'头(header)，覆盖原先自定义的。
    proxy:{
        host:127.0.0.1,
        port:9000,
        auth:{
            username:'cdd',
            password:'123456'
        }
    },
    //`cancelTaken` 定义一个取消，能够用来取消请求
    //（查看 下面的Cancellation 的详细部分）
    cancelToke: new CancelToken(function(cancel){
    })
});