Vue进阶 | 关于Axios及封装

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

Axios 是一个基于 promise 网络请求库，作用于 node.js 和浏览器中

关于Axios

1. ajax、axios、fetch

• ajax：基于原生XHR开发，是针对MVC的编程。多个请求有先后关系时会出现回调地狱
• fetch：使用了ES6中的promise对象，是原生js，不是对ajax的进一步封装，脱离了XHR，是ES规范里新的实现方式
• axios：基于Promise封装的HTTP客户端。

相对来说，axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，支持多平台（node和浏览器全支持）。

2. axios的特点：

3.使用方法

安装：

npm install axios

导入：

import axios from 'axios'

使用：

• axios.request(config)
• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.options(url[, config])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

也支持执行多个并发请求 :

• axios.all([ , ])
• axios.spread(callback)

封装Axios

为了方便项目的维护，都会根据项目需求对Axios进行二次封装，包括请求头、状态码、等等，get、post等方法也可以进行进一步的封装。

其中，封装时需要考虑几点：

1. 区分开发、测试、生产环境的请求地址
2. 跨域问题。需要配置devServer的proxy对象
3. 请求头的配置
4. 请求拦截器与响应拦截器配置
5. 统一管理API（将方法放在同一个文件），封装成一个个的方法并暴露出去，在页面中引入用并使用

常见问题

曾经在Axios上面踩到一个坑，发送请求时报错： Required request body is missing

原因：

data是post请求时添加到body请求体中的

params是get请求添加到url的请求字符串中的，如果将data修改为params是不能请求成功的

正确写法：

export function getList (data) {
  return request({
    url: '/api/list',
    method: 'post',
    data
  })
}

export function getList2 (params) {
  return request({
    url: '/api/list', 
    method: 'get', 
    params:params
  }) 
}

或者用更好的方式进行封装，避免出现错误：

function trans (parameter, method) {
  if (method === 'get') {
    return { params: parameter }
  } else {
    return { data: parameter }
  }
}

export function getList (parameter, method = 'post') {
  return request({
    url: '/api/list',
    method: method,
    ...trans(parameter, method)
  })
}