axios快速上手（简单使用）

axios对ajax请求进行了封装，并且使用promise的链式调用使得网络请求的代码逻辑更为清晰，同时支持async和await的编写方式使代码看起来像同步，更加方便于理解和阅读。axios这个库的体积也不大，先在项目里进行安装，npm i axios --save，然后引入就可以直接使用。

import axios from 'axios';

axios({
  url: 'https://httpbin.org/post',
  method: 'post', // 默认为get
  data: {        // post请求传递参数用data, get请求传递参数用params
     name: 'macus',
     age: 18 
  }
}).then(value=>{
    // 获取请求成功的结果
    console.log(value)
}).catch(error=>{
    // 获取请求发送失败的结果
    console.log('error', error)
})

以下图片是axios的成功响应返回的结果，可以看到返回的信息非常的多，其中data是服务器真正返回的内容，而其它的信息全都是axios提供的，其中包括请求的配置config，头部信息headers，XMLHttpRquest的响应状态

axios响应结果.png

axios还提供了很多的API用于发送不同的网络请求，以上请求还可以写成以下形式，这样就不用写method属性，更为简洁一些

axios.post('https://httpbin.org/get', {
    name: 'macus',
    age: 18
})

还有很多其它的API

axios.get / axios.put / axios.delete / axios.request

虽然api的名字不同，其实这些api全都是调用的axios.request方法，以下为axios源码，可以看到都是调用的Axios.prototype.request

axios源码.png

一般来说，业务的网络请求地址的域名都是固定的，可以在发送请求时定义一个baseURL

// 发送请求时定义baseURL
axios({
  baseURL: 'https://httpbin.org',
  url: '/post',
  method: 'post', // 默认为get
  data: {
    name: 'macus',
     age: 18
  }
})

每一个请求都定义一个baseURL使得代码冗余，这里可以在全局的配置项里进行定义

// 通过axios.defaults进行全局配置
axios.defaults.baseURL = 'https://httpbin.org'

axios({
  url: '/post',
  method: 'post', // 默认为get
  data: {
     name: 'macus',
     age: 18
  }
})

当有多个域名用于网络请求时，定义一个默认全局的baseURL就明显不够用了，axios提供了自定义实例的方式，我们可以通过axios.create定义多个实例用于配置不同类型的网络请求，定义之后发送网络请求方式与通过axios这个实例对象去调用一致

const instance = axios.create({
   baseURL: 'https://httpbin.org'
})

instance.get('/get', {
   params: {
      name: 'macus'
   }
})

有时候，我们想对请求和响应做一些统一的处理，比如发送请求的时候展示加载的动画、检查请求参数中有没有携带token，如果没有就需要用户登录，再比如，响应报文返回的数据项太多，而我们只需要服务器返回的数据就行，那么这个时候，可以使用拦截器来对请求和响应进行通用的处理，这里再使用上面创建的instance实例对象。

// 对请求进行拦截，分别传入请求成功和失败的处理函数
instance.interceptors.request.use(config=>{ 
    // 可以在这里进行一些逻辑处理
    console.log('请求拦截了', config)
    // config为请求的配置项信息，必须要有请求报文的返回
    return config
}, error=>{
    // 处理请求失败
})

// 对响应进行拦截，分别传入响应成功和失败的处理函数
instance.interceptors.response.use(result=>{
    console.log('响应拦截了',result)
    // result为响应信息，必须将响应报文进行返回
   // 只需要服务器返回的data数据，可直接返回data
    return result.data
}，error=>{
    // 失败时的处理方式，如 404 500 等
})

axios拦截器的请求和响应参数.png

目前每发送一个网络请求，都需要调用axios的实例，假如有一天这个库有bug，或者后续将项目进行优化，想使用别的库，那么有100处发送了网络请求，这100处都需要修改，这样代码的可维护性变得比较差，为了解决这样的问题，我们可以自行进行一个封装，每发送网络请求，都使用我们自定义的函数，这样后续即使想换成别的库，直接修改我们封装的函数就行，下面做一个简单封装的演示

// ajaxRequest.js
import axios from 'axios'
const instance = axios.create({
  baseURL: 'https://httpbin.org',
  timeout: 5000 // 超时时间
})
export function requestPost(url, data, successCallback, errorCallback){
  instance({
    url,
    data,
    method: 'post'
  }).then(successCallback)
  .catch(errorCallback)
}

//调用的页面
import { requestPost} from './ajaxRequest'
requestPost('/post', {name: 'kiki'}, result=>{
   console.log('成功了',result)
},error=>{
   console.log('失败了',error)
})

以上就是axio的快速上手使用~