axios网络请求

Posted 2021-03-09 爱代码三千

axios网络请求

淘汰ajax，jquery ajax，选择axios

axios名称的由来? 个人理解
axios: ajax i/o system

请求方式

• axios(config) //默认请求方式
• axios.request(config)
• axios.get(url,{config})
• axios.delete(url,{config})
• axios.head(url,{config})
• axios.post(url,data,{config})
• axios.put(url,data,{config})
• axios.patch(url,data,{config})

axios的使用

1. 安装axios
   npm install axios --save
2. 这里使用第一种请求方式axios(config)
3. config配置属性
   url:‘http://被请求的接口‘,
   method:‘get或post‘,
   params:{针对get请求的参数拼接},
   data:{针对post请求时参数获取}
4. axios支持promise，成功后回调then，失败回调catch

axios并发请求

• 使用方法和promist.all一样。

• 在axios.all([])放入并发请求的axios，都请求成功后在then中回调

• axios.all([])返回的是一个数组，axios还提供了axios.spread，
  它可以将数组展开使用，res1,res2,,

    //这个httpbin.org网站可以做很多网络请求模拟，没有接口可以尝试用这个
    axios.all([
      axios({
        url:'接口1',
      }),
      axios({
        url:'接口2',
        params:{
          type:'pop',
          page:1
        }
      })
    ]).then(axios.spread((res1,res2) => {
      console.log(res1);
      console.log(res2);
    }))

如果想两个接口内容相同，我们只需获取一个接口的话，请参考axios封装第二步，封装两个接口，
在catch中使用接口2并传入参数即可。

全局配置

把一些固定的参数抽取出来进行全局配置

axios.defaults.timeout = 1000
axios.defaults.baseURL = '基础接口';
//后面设置url的时候只需写路径即可，如/home/data

常见的配置选项

• 请求地址
  • url: ‘/user‘,
• 请求类型
  • method: ‘get‘,
• 请根路径
  • baseURL: ‘http://www.mt.com/api‘,
• 请求前的数据处理
  • transformRequest:[function(data){}],
• 请求后的数据处理
  • transformResponse: [function(data){}],
• 自定义的请求头
  • headers:{‘x-Requested-With‘:‘XMLHttpRequest‘},
• URL查询对象
  • params:{ id: 12 },
• 查询对象序列化函数
  • paramsSerializer: function(params){ }
• request body
  • data: { key: ‘aa‘},
• 超时设置
  • timeout: 1000,
• 跨域是否带Token
  • withCredentials: false,
• 自定义请求处理
  • adapter: function(resolve, reject, config){},
• 身份验证信息
  • auth: { uname: ‘‘, pwd: ‘12‘},
• 响应的数据格式 json / blob /document /arraybuffer / text / stream
  • responseType: ‘json‘,

axios实例

在开发中有可能我们用的不是一个接口，这个时候使用全局配置就无法获取多个接口了

我们可以创建一个axios实例，一个实例对应一个接口和相应配置，提高开发效率。

1. 创建实例中基础配置
   const instance1 = axios.create({
   baseURL:‘基础接口‘,
   timeout:5000
   })
2. 使用实例和配置路径等
   instance1({
   url:‘路径1‘,
   params:{}
   }).then(rel =>{
   console.log(rel)
   })
3. 当有多个接口配置多个实例即可

axios封装

在网络开发中，我们使用第三方插件有可能出现第三方插件重大bug或不再维护的情况

当出问题时多个页面修改第三方插件是一件很麻烦的事，所以我们可以封装一个文件作为代理

其他页面从代理中传入config并获取请求，当第三方插件失效只需修改代理文件即可，无需全部修改

一、 回调式封装

1. 封装代理文件，以函数形式导出。如多个接口可配置多个函数导出
2. 函数内传入三个参数，config，success，failure。这里success和failure是函数。
3. 在函数中配置axios实例，在实例then和catch中分别回调函数success和failure
4. 在需要请求页面导入代理，调用并传入(config,success函数，failure函数)

二、 promise式封装

1. 导出封装函数，函数中传入config参数。如多个接口可配置多个函数导出
2. 函数中返回一个promise，在promise中嵌套axios实例
3. 实例回调result中再使用promise的回调，把回调的结果返回出去
4. 在请求页面导入，因已返回结果，所以直接传入axios配置，然后正常then/catch即可。
   （就是在执行笔记：axios实例第2步）

    import axios from 'axios'

    export function request(config) {
      return new Promise((resolve, reject) => {
        const instance = axios.create({
          baseURL:'http://123.207.32.32:8000/api/hy',
          timeout:5000
        })

        instance(
          config
        ).then( res => {
          resolve(res)
        }).catch(err =>{
          reject(err)
        })

      })
    }

三、 最终封装-由promise式改编（大道至简）

在axios实例中已经内置了promise，所以我们才能回调then/catch，

为什么我们还要再使用promise再回调一次呢，我们的目的是返回结果，

直接把axios实例返回出去不就好了嘛

import axios from 'axios'

export function request(config) {
    const instance = axios.create({
      baseURL:'http://123.207.32.32:8000/api/hy',
      timeout:5000
    })
    return instance(config)
}

啰嗦一句。这里不是export default导出。导入的话记得加import{} 花括号

* axios拦截器

全局拦截：
拦截器前面使用axios

局部拦截：
拦截器前面使用的是实例的名称

拦截四种方式：

• request成功拦截
  

• request失败拦截

    instance.interceptors.request.use(config =>{
      console.log(config);
      return config
    },error => {
      console.log(error);
    })

• response成功拦截
  

• response失败拦截

    instance.interceptors.response.use(result =>{
      console.log(result);
      return result.data
    },error => {
      console.log(error);
    })

拦截器需求列举

1. 拦截一些config中不符合服务器要求的信息
2. 发送请求时，都希望在界面中显示一个请求图标，如图片加载转圈
3. 网络登入请求（token），没有特殊信息不允许登入

注意事项：

1. 拦截器中use传入的是两个函数，result回调和error回调
2. request拦截成功后记得把数据再返回出去
3. response拦截成功后只需把data返回出去即可，其他东西是axios这个框架添加的
4. result拦截主要是对数据进行过滤，error拦截主要是根据错误跳转不同错误提示页面