一个简单的axios使用

什么是axios？

• axios是基于promise的Http客户端，简单来讲就是可以通过axios来向后台发送请求，并在请求中做更多的可控功能！由于没有具体的翻译，个人理解的axios的名称由来：ajax i/o system

文档网站

1. GitHub上的axios
2. 关于axios的中文网站

axios的特点

• 在浏览器中创建 XMLHttpRequests请求
• 在node中发送http请求
• 支持promise api
• 拦截请求数据和响应数据
• 取消请求
• 自动转换为JSON格式
• 客户端支持防御XSRF

axios--post和get

1.get 请求：

image.png

2.post请求：

image.png

并发请求

1.使用axios.all()来处理并发请求，可以放入多个请求数组
2.axios.all([axios.get('/user/12'),axios.post('/user/34',{config})])返回的是一个数组,使用axios.spread可以将数组展开：[arr1,arr2]==>arr1,arr2

image.png

全局配置

事实上在开发中很多参数都是固定的，这个时候可以进行抽取，利用axios的全局配置axios.defaults

axios.defaults.baseURL = '123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

axios实例

为什么创建实例，原因是当我们axios模块中导入对象时，使用的是默认的实例，当给这些实例设置默认配置时这些配置就被固定下来了，但后续开发中某些配置或许会不一样，如timeout，content-Type等，这时我们就可以创建新的实例，并传入属于该实例的配置信息

image.png

image.png

拦截器

1.axios请求拦截器：axios.interceptors.requset.use(callback(config))
2.axios响应拦截器：axios.interceptors.response.use(callback(response))
3.实例请求拦截器：instenceAxios.interceptors.requset.use(callback(config))
4.实例响应拦截器：instenceAxios.interceptors.response.use(callback(response))

image.png

封装axios

为什么要对axios进行封装了，原因是如果在项目中对一个第三方库过于依赖的话，当第三方库不进行更新的维护的时候，那么我们的项目更换另一个库或者进行维护会很难，所以我们对axios进行封装，遇到这样的情况就可以只针对我们封装的东西进行修改就行！

//requset.js
//第一步，引入axios模块
import axios from 'axios'
//导出封装函数
expoet default function request(config){
      //创建实例
  const instance = axios.create({
      baseURL = '127.168.0.0.1:8000'  ,
      timeout = 5000
  })  
//创建请求拦截器
instance.interceptors.request.use(config=>{
      //dosomething
return config
    },error=>{
  //do something 
console.log(error)
})
//创建响应拦截器
instence.interceptors.response.use(res=>{
  //do something
     return res
  },error=>{
    console.log(error)
})
//返回该实例，发送真正的请求
return instance（config）
}

可以对网络请求针对不同的页面数据进一步封装，这样就不会显得过于耦合，request.js也不会很臃肿

//home.js
import request from 'request.js'
export homeRequset(type,age){
return request({
    url:'/user',
params:{
    type,age
  }
  })
}