基于 axios 封装一个简单的网络请求 原创 精华

一、什么是 axios

简单来说，axios是一个基于promise的 HTTP 客户端，用于 node.js 和浏览器。

特性

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 支持PromiseAPI
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

基本使用

安装

// 使用 npm
npm install axios
// 使用 cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

引入

import axios from 'axios'

使用

axios({        
  url:'xxx',    // 请求地址
  method:"GET", // 请求方法
  params:{      // 注意：get 请求使用 params，post 请求用 data
    type: '',
    id: 1
  }
}).then(res => {  
  // 返回的数据
  console.log(res);   
})

二、封装网络请求

为什么要进行封装？假设每发起一次HTTP请求，就要将超时时间、请求头、请求地址、错误处理等这些重复的操作都写一遍，不仅浪费时间，维护性也不好。
所以我们应该对axios进行封装

1. 设置 baseURL 或配置代理

if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com'
}

在本地调试时，可能需要在vue.config.js中配置代理

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }

2. 设置请求头和超时时间

新建一个 axios.js 文件，将此步骤和3、4、5步的代码复制到里面

const request = axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 30000,
    headers: {
      get: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
      },
      post: {
        'Content-Type': 'application/json;charset=utf-8'
      }
    },
})

3. 请求拦截器

请求拦截器可以给每个请求加上 token

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在 token
    // 如果存在，则统一在 http 请求的 header 都加上 token
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })

4. 响应拦截器

响应拦截器可以在接收到响应后对数据进行处理后再返回，如根据状态码判断登录状态、授权

// 响应拦截器
axios.interceptors.response.use(res=> {
  // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  if (res.status === 200) {
    if (res.data.code === 5xx) {
      // 未登录跳转登录页
    } else {
      return res.data // 这里设为 res.data 后当我们拿数据时就不需要再用 res.data.data 了
    }
  } else {
    return Promise.reject(res)
  }
}, error => {
  // 可以在这里对异常状态作统一处理
  if (error.res.status) {
    return Promise.reject(error.res)
  }
})

5. 导出

export default request;

6. 创建一个 api.js 文件

创建一个 api.js 文件并引入第 5 步导出的 axios 实例 request

import request from './axios.js'
export const getList = (data = {}) => {
 return request({ 
   url: 'apps/api/org/list',
   method: 'post',
   data
 })
}

7. 页面中调用

// .vue
import { getList } from '@/api/api.js'

getList ({ id: 2 }).then(res => {
  console.log(res)
})

这样就可以对网络请求进行统一管理了，以后维护修改只需要在api.js文件中操作就行了

三、小结

• 封装是很好的编程思想，简单的axios封装，就可以大大加快开发效率；
• 如果对上面的封装不够满意，可以在此基础上进行修改，合适自己项目的才是最好的