关于javascript: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 还提供了很多的 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

一般来说，业务的网络申请地址的域名都是固定的，能够在发送申请时定义一个 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 的实例，如果有一天这个库有 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 的疾速上手应用~