axios

特点：

1 从浏览器创建XMLHttpRequests

2 从node.js创建http请求

3 支持Promise API

4 拦截请求和响应

5 转换请求和响应的数据

6 取消请求

7 自动转换JSON数据

8 客户端支持预防XSRF

 Axios是一个基于promise的HTTP库，可以用于浏览器和node.js

 

vue-cli3,生成的项目，public就是根目录，实际上访问的就是public下的index.htm,所在在

public下的文件需要访问，直接/文件名 就可以了

axios请求的方法常见有5种

：get post put delete patch

get:获取数据

post：提交数据  表单提交，文件上传

put:更新数据（所有数据推送到后端）

patch：更新数据（只将修改的数据推送到后端）

delete:删除数据

post 有content-type     

form-data  表单提交 文件上传 图片上传

需要使用FormData 将数据转化程度能够formData格式

let formData=new FormData();

for(let key in data){formData.append(key,data[key])}

applicition/json

 

并发请求：同时进行多个请求，并统一处理他们的返回值

axios.all() axios.spread()

axios.all() 参数是数组，请求方法，所有请求都成功之后执行回调函数axios.spread()

demo:

axios.all([axios.get(url1),axios.get(url2),axios.get(url3)]).then(

axios.spread((data1,data2,data3)=>{//执行回调函数spread，有一个请求就有几个返回值

})

);

axios实例   axios.create()

用处：多个后台接口域名  超时时长不一样

axios参数配置：

baseURL:请求的域名，基本地址

timeout:设置请求的超时时长，单位是毫秒(ms)

url:请求的路径

method：请求的方法

headers:{}设置请求头 ，比如token

params:{},//请求参数拼在url上

data:{}请求参数放在请求体中

1 axios全局配置  用的比较少

2 axios实例配置   实际开发中，都会声明一个实例，在实例中进行配置

3 axios请求配置

1 全局配置

axios.defaults.timeout=1000;

axios.defaults.baseURL="xxxxxxxx";

2 实例配置

let instance=axiso.create();

instance.defaults.timeout=3000;

3 请求配置

instance.get(url,{timeout:5000}).then().catch()

优先级：1 2 3 由低到高

拦截器

在请求或响应被处理前拦截它们

请求拦截器 响应拦截器

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.inerceptors.request.use(config=>{},err=>{})

axios.interceptors.request.eject()

 

错误处理：请求错误和响应错误都会进入catch

404 请求没有找到 401 请求超时

响应错误以5开头的

500 系统错误 502 系统重启

在实际开发中，一般添加统一错误处理

就是使用请求和响应拦截器

取消请求：

用于取消正在进行的http请求（了解）

需要在发送的请求中带上取消请求的token参数

demo:

let source=axios.CancelToken.source();

axios.get().then(res=>{

console.log(res)

}).catch(err=>{//请求取消之后进入catch

})

//取消请求(message会被cancel捕获)

source.cancel('cancel http')

//什么情况下可能用到取消请求

在请求数据时间比较长，需要取消请求的地方会用到

 

axios封装：

demo：

第一步：将所有的请求放在一个文件中

1.1 新建service文件键，新建url.js

const urlList={
    getList:{
        url:'/getList',
        method:'get'
    },
    saveList:{
        url:'',
        method:'post'
    },
    updataList:{
        url:'',
        method:'post'
    },
};
export default urlList;

1.2 新建http.js ，新建axios实例，时间request和response的过滤，通过for循环实现不同的请求方法

import urlList from './url.js'
import axios from 'axios'
let instance=axios.create({
    baseURL:'http://localhost:8081',
    timeout:1000
});
instance.interceptors.request.use(config=>{
    return config;
},err=>{
    console.log(err);
})
instance.interceptors.response.use(res=>{
    return res;
},err=>{
    console.log(err);
})
const Http={};//包装请求方法的容器
// 循环遍历输出不同的请求方法
for(let i in urlList){
    // 使用async await的原因，避免进入回调地狱，
    //使用回调的弊端：一个请求的参数依赖于另一个请求的返回值，就需要在回调函数中执行另一个请求，如果这样的依赖比较多就会陷入回调地狱，使用async await 可以直接按正常代码进行书写，看着更规范易懂
    Http[i]=async function(params,isFormata=false,config={}){
        let api=urlList[i];
        let res=null;
        let newParams=params;
        if(api.method=="post"||api.method=='put'||api.method=='patch'){
            try{
                res=await instance[api.method](api.url,newParams,config);
            }catch(err){
                res=err;
            }
           
        }else{
            config.params=newParams;
            try{
                res=await instance[api.method](api.url,config);
            }catch(err){
                res=err;
            }
        }
        return res;
        
    }
}
export default Http;

第二步：在main,js中注册http为vue的全局变量

import Http from './service/http'
Vue.prototype.$http=Http;

第三步：使用（要与封装的方法一直，使用async 和await）

async getList(){
        let res=await this.$http.getList();
  }