axios
Javascript axios
axios
发布日期:   2019-11-10
更新日期:   2020-04-25
文章字数:   3k
阅读时长:   13 分
阅读次数:  

axios 全攻略

  • 最早的异步请求用的是源生的，然后进化到 jquery, 接着逐渐演变到现在的 axios

axios 简介

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端,它具有以下特征

  • 从浏览器中创建 XMLHttpRequest

  • 从 node.js 发出请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 自动转换 json 数据

  • 客户端支持防止 CSRF/XSRF

axios 引入方式

npm i axios

或者使用 cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

简易的 get 请求,POST 请求,执行多个并发请求

执行 GET 请求

// 向具有指定ID的用户发出请求
axios
  .get('/user?ID=12345')
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })
// 也可以通过 params 对象传递参数,要是get需要里面写params
axios
  .get('/user', {
    params: {
      ID: 12345,
    },
  })
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

执行 POST 请求

axios
  .post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone',
  })
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345')
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions')
}

axios.all([getUserAccount(), getUserPermissions()]).then(
  axios.spread(function (acct, perms) {
    //两个请求现已完成
  })
)

传入相关配置(个人用的最多)

axios({
  method: 'post', //或者get
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone',
  },
})

自定义配置 axios

请求方法别名

  • axios.request(config)

  • axios.get(url,[config])

  • axios.delete(url,[config])

  • axios.head(url,[config])

  • axios.post(url,data,[config])

  • axios.put(url,data,[config])

  • axios.patch(url,data,[config])

并发

  • axios.all(iterable)

  • axios.spread(callback)

创建实例

您可以使用自定义配置来创建 axios 的新实例

  • axios.create([config])
var axiosobj = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' },
})

实例方法

可用的实例方法如下，指定的配置与实例结合

  • axios.request(config)

  • axios.get(url,[config])

  • axios.delete(url,[config])

  • axios.head(url,[config])

  • axios.post(url,data,[config])

  • axios.put(url,data,[config])

  • axios.patch(url,data,[config])

请求配置

下面这些用于发出请求的可用配置选项，只有 URL 是必须的。如果未指定方法，请求默认就是 GET

{
  // `url`是将用于请求的服务器URL
  url: '/user',
  // `method`是发出请求时使用的请求方法
  method: 'get', // 默认
  // `baseURL`将被添加到`url`前面，除非`url`是绝对的。
  // 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。
  baseURL: 'https://some-domain.com/api/',
  // `transformRequest`允许在请求数据发送到服务器之前对其进行更改
  // 这只适用于请求方法'PUT'，'POST'和'PATCH'
  // 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream
  transformRequest: [function (data) {
    // 做任何你想要的数据转换
    return data;
  }],
  // `transformResponse`允许在 then / catch之前对响应数据进行更改
  transformResponse: [function (data) {
    // Do whatever you want to transform the data
    return data;
  }],
  // `headers`是要发送的自定义 headers
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // `params`是要与请求一起发送的URL参数
  // 必须是纯对象或URLSearchParams对象
  params: {
    ID: 12345
  },
  // `paramsSerializer`是一个可选的函数，负责序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  // `data`是要作为请求主体发送的数据
  // 仅适用于请求方法“PUT”，“POST”和“PATCH”
  // 当没有设置`transformRequest`时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream
  data: {
    firstName: 'Fred'
  },
  // `timeout`指定请求超时之前的毫秒数。
  // 如果请求的时间超过'timeout'，请求将被中止。
  timeout: 1000,
  // `withCredentials`指示是否跨站点访问控制请求
  // should be made using credentials
  withCredentials: false, // default
  // `adapter'允许自定义处理请求，这使得测试更容易。
  // 返回一个promise并提供一个有效的响应（参见[response docs]（＃response-api））
  adapter: function (config) {
    /* ... */
  },
  // `auth'表示应该使用 HTTP 基本认证，并提供凭据。
  // 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  // “responseType”表示服务器将响应的数据类型
  // 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default
  //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
  // `xsrfHeaderName`是携带xsrf令牌值的http头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // default
  // `onUploadProgress`允许处理上传的进度事件
  onUploadProgress: function (progressEvent) {
    // 使用本地 progress 事件做任何你想要做的
  },
  // `onDownloadProgress`允许处理下载的进度事件
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  // `maxContentLength`定义允许的http响应内容的最大大小
  maxContentLength: 2000,
  // `validateStatus`定义是否解析或拒绝给定的promise
  // HTTP响应状态码。如果`validateStatus`返回`true`（或被设置为`null` promise将被解析;否则，promise将被
  // 拒绝。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },
  // `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
  // 如果设置为0，则不会遵循重定向。
  maxRedirects: 5, // 默认
  // `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
  // 允许配置类似`keepAlive`的选项，
  // 默认情况下不启用。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  // 'proxy'定义代理服务器的主机名和端口
  // `auth`表示HTTP Basic auth应该用于连接到代理，并提供credentials。
  // 这将设置一个`Proxy-Authorization` header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  // “cancelToken”指定可用于取消请求的取消令牌
  // (see Cancellation section below for details)
  cancelToken: new CancelToken(function (cancel) {
  })
}

使用 then 时,您将收到如下响应

axios.get('/user/12345').then(function (response) {
  console.log(response.data)
  console.log(response.status)
  console.log(response.statusText)
  console.log(response.headers)
  console.log(response.config)
})

配置默认值

您可以指定将应用于每个请求的配置默认值

全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com'
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] =
  'application/x-www-form-urlencoded'

自定义实例默认值

//在创建实例时设置配置默认值
var instance = axios.create（{
   baseURL：'https://api.example.com'
}）;

//在实例创建后改变默认值
instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;

配置优先级顺序

配置将与优先顺序合并。顺序是 lib/defaults.js 库中的默认值。然后是实例的 defaults 属性,最后是请求的 config 参数,后者优先于前者。

//使用库提供的配置默认值创建实例
//此时，超时配置值为`0`，这是库的默认值
//优先级最低
var instance = axios.create（）;

//覆盖库的超时默认值
//现在所有请求将在超时前等待2.5秒
instance.defaults.timeout = 2500;

//覆盖此请求的超时，因为它知道需要很长时间
//优先级最高
instance.get（'/ longRequest'，{
   timeout：5000
}）;

拦截器

你可以截取请求或者响应在被 then 或者 catch 之前处理

//添加请求拦截器
axios.interceptors.request.use（function（config）{
     //在发送请求之前做某事
     return config;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;

//添加响应拦截器
axios.interceptors.response.use（function（response）{
     //对响应数据做些事
     return response;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;

如果你以后可能需要删除拦截器

var myInterceptor = axios.interceptors.request.use(function () {
  /*...*/
})
axios.interceptors.request.eject(myInterceptor)

你可以将拦截器添加到 axios 的自定义实例

var instance = axios.create()
instance.interceptors.request.use(function () {
  /*...*/
})

完整版本的拦截器。目前我用的

// Vue版本的拦截器request.js
import axios from 'axios'
import router from '@/router'
import store from '@/store'

/** **** request拦截器==>对请求参数做处理 ******/
axios.interceptors.request.use(
  (config) => {
    // 加载
    store.state.loadingflag = true //加载等待动画loading,改变store值
    let value = window.sessionStorage.getItem('token')
    if (value) {
      let result = JSON.parse(value)
      config.headers.authorization =
        result.token_type + ' ' + result.access_token
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
/** **** respone拦截器==>对响应做处理 ******/
axios.interceptors.response.use(
  (response) => {
    store.state.loadingflag = false //加载等待动画loading不需要可以删除
    return response
  },
  (error) => {
    // 错误提醒
    store.state.loadingflag = false
    const { status } = error.response
    if (status == 401) {
      window.sessionStorage.clear()
      router.push('/login')
      return Promise.reject(error)
    }
    // 页面跳转
    router.push('/login')
    return Promise.reject(error)
  }
)
export default axios

处理错误

axios.get（'/ user / 12345'）
   .catch（function（error）{
     if（error.response）{
       //请求已发出，但服务器使用状态代码进行响应
       //落在2xx的范围之外
       console.log（error.response.data）;
       console.log（error.response.status）;
       console.log（error.response.headers）;
     } else {
       //在设置触发错误的请求时发生了错误
       console.log（'Error'，error.message）;
     }}
     console.log（error.config）;
   }）;

您可以用 validateStatus 配置选项定义 http 状态码的错误范围

axios.get（'/ user / 12345'，{
   validateStatus：function（status）{
     return status < 500; //仅当状态代码大于或等于500时拒绝
   }}
}）

使用 application / x-www-form-urlencoded 格式

默认情况下,axios 将 Javascript 对象序列化 JSON，要以应用程序/ x-www-form-urlencoded 格式发送数据，您可以使用以下选项之一。

浏览器

在浏览器中，您可以使用 URLSearchParams API，如下所示：

var params = new URLSearchParams()
params.append('param1', 'value1')
params.append('param2', 'value2')
axios.post('/foo', params)

请注意所有浏览器都不支持 URLSearchParams，但是有一个 polyfill 可用（确保 polyfill 全局环境）。

  • 或者您可以使用 qs 库对数据进行编码
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

Node.js 中

  • 在 node.js 中 可以使用 querystring 模块,如下所示
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

Promise

  • axios 依赖本机要支持 ES6 Promise 实现。 如果您的环境不支持 ES6 Promises，您可以使用 polyfill。

还有一种可能性换 token

当 token 过期了,我们需要重新发送 token，然后重新发送请求.

两个难点 1.当一个 token 刷新的时候其他接口怎么办?(这里用到了锁和队列) 2.刷新 token 和获取 token 接口不一致

下面放上完整版代码

// request.js
/*思路
 1.创建了两个实例 一个暴露以后使用,一个就为了重新刷新token
   之所以创立两个是因为headers里面放的内容不一样
 2.千万不能在暴露的实例里写headers这样他里面的值不会改变
 3.多个请求利用了锁的概念,上锁了则必须要把其他的请求存到数组里。解锁后在执行
*/
import axios from 'axios'
import router from '@/router'
import store from '@/store'
import url from '@/config.js'
// 是否正在刷新的标记
let isRefreshing = false
// 重试队列，每一项将是一个待执行的函数形式
let requests = []
//获取token
function getToken() {
  const token = window.sessionStorage.getItem('token')
  if (token) {
    console.log(token)
    return JSON.parse(token)
  } else {
    return {
      token_type: null,
      access_token: null,
    }
  }
}
/*自定义实例开始*/
const instance = axios.create({
  //这里千万不能写headers否则会造成数据缓存
  timeout: 300000,
})
/*获取refreshtoken开始*/
const Base64 = require('js-base64').Base64
let headers = 'Basic ' + Base64.encode(url.username + ':' + url.password)
const refreshinstance = axios.create({
  timeout: 300000,
  headers: {
    authorization: headers,
  },
})
function refreshToken(lastrequest) {
  let data = window.sessionStorage.getItem('token')
  let result = JSON.parse(data)
  let formData = new FormData()
  formData.append('grant_type', 'refresh_token')
  formData.append('refresh_token', result.refresh_token)
  return refreshinstance({
    url: url.token,
    data: formData,
    method: 'POST',
  }).then((res) => {
    //console.log(res.data);
    let result = res.data
    let tokenresult = JSON.stringify(result)
    window.sessionStorage.setItem('token', tokenresult)

    lastrequest.headers = {
      authorization: result.token_type + ' ' + result.access_token,
    }
    requests.forEach((cb) => cb()) //请求完成将所有队列的请求重新来一次
    requests = [] //清空它
    isRefreshing = false //解开锁
    //window.location.reload(); //在考虑一下
    return instance(lastrequest)
  })
}
/*获取refreshtoken结束*/
/** **** request拦截器==>对请求参数做处理 ******/
instance.interceptors.request.use(
  (config) => {
    // 加载
    store.state.loadingflag = true
    let value = getToken()
    console.log(value)
    config.headers.authorization = value.token_type + ' ' + value.access_token
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
/** **** respone拦截器==>对响应做处理 ******/
instance.interceptors.response.use(
  (response) => {
    store.state.loadingflag = false
    return response
  },
  (error) => {
    // 错误提醒
    //console.log(error.config);
    let lastrequest = error.config
    store.state.loadingflag = false
    const { status } = error.response
    if (status == 401) {
      if (!isRefreshing) {
        isRefreshing = true
        return refreshToken(lastrequest)
      } else {
        return new Promise((resolve) => {
          requests.push(() => {
            lastrequest.headers = {
              authorization:
                getToken().token_type + ' ' + getToken().access_token,
            }
            resolve(instance(lastrequest))
          })
        })
      }

      //return Promise.reject(error);
    }
    // 页面跳转
    return Promise.reject(error)
  }
)
/*刷新token对响应的处理*/
refreshinstance.interceptors.response.use(
  (response) => {
    store.state.loadingflag = false
    return response
  },
  (error) => {
    // 错误提醒
    store.state.loadingflag = false
    const { status } = error.response
    if (status == 401) {
      // // // 清除token
      window.sessionStorage.clear()
      // // 页面跳转
      router.push('/login')
      //刷新页面
      window.location.reload()
    }
    window.sessionStorage.clear()
    // // 页面跳转
    router.push('/login')
    //刷新页面
    window.location.reload()
    return Promise.reject(error)
  }
)
/*刷新token对响应的处理结束*/
export default instance
文章作者: 雾烟云
文章链接: https://jsopy.gitee.io/2019/11/10/axios/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 雾烟云 !
Javascript axios
  目录