网络请求模块的选择 -axios(六)

一、axios简介

1)、 特点：

​ 在浏览器中发送XMLHttpRequests请求
​ 在node.js中发送http请求
​ 支持Promise Api
​ 拦截请求和响应
​ 转换请求和响应数据
2）、安装 axios 命令：

npm install axios --save

3）、在js文件中导入 axios 以及使用

import axios from 'axios'   
     //第一种 
     //axios 内部支持Promise的，也就是说在这可以直接使用then方法
     axios({
        url:'网络请求地址',
        method:'Post', //如果不写请求方式，默认为get
        params:{
            参数列表
        }
    }).then(res=>{
       console.log(res)
    }));
    //第二种
    axios.get('请求地址',{
     method:'',
     params:{
            参数列表
            }
    }).then(res=>{
     console.log(res)
    })); 
     //第三种
    axios.post('请求地址',data:{参数列表},{
     method:''
    }).then(res=>{
     console.log(res)
    }));

4)、axios 的并发请求

示例代码如下：

axios.all([axios(),axios()]).then(axios.spread((res1,res2)=>{
    //res1  结果1
    //res2  结果2
  }))

5）、axios的配置信息

事实上在开发过程中有许多的参数是一样的，比如我们请求的URL前缀等；这个时候我们需要进行抽取，也可以利用axios的全局变量进行设置，代码如下：

axios.defaults.baseURL = '公共的请求地址';
axios.defaults.timeout = '超时时间【单位是毫秒】';

6）、axios的实例

创建axios实例：

const instance = axios.create({
baseURL:'公共请求地址',
timeout:超时时间【单位：毫秒】
});
instance ({
  url:'具体的请求地址',
  method:''
}).then(res=>{
   console.log(res)
})

7)、axios文件抽离以及拦截器的使用

在项目的开发过程中为了减少组件对axios的依赖，我们会将axios抽离到单独的文件中进行封装，示例代码如下：文件目录：network/request.js

import axios from 'axios';
export const request = function (){
    // 1、创建实例
    const instance = axios.create({
       baseURL:'公共地址',
       timeout: 超时时间【单位：毫秒】
    });
     //请求拦截
    instance.interceptors.request.use(config=>{
      return  config;
    },err=>{
      //处理异常
    })
    //响应拦截
     instance.interceptors.response.use(config=>{
      return  config.data;
    },err=>{
      //处理异常
    })
    //3 返回  Promise
    retrun instance(config);
};

组件中调用：

import request from './network/request';
const config = {
    url:'请求具体地址',
    method:'请求方式',
    //get方式的参数列表
    params:{
        参数列表
    }AXSOS
    //post 请求方式的参数列表
    data:{
        参数列表
    }
}
//返回的是Promise类型
request(config).then(res= >{
  //请求响应后的处理
}).catch(err=>{
  //异常处理
})

​