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

xjjFeRookie
发布于 2022-5-24 17:59
浏览
2收藏

一、什么是 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>
  • 1.
  • 2.
  • 3.
  • 4.

引入

import axios from 'axios'
  • 1.

使用

axios({        
  url:'xxx',    // 请求地址
  method:"GET", // 请求方法
  params:{      // 注意:get 请求使用 params,post 请求用 data
    type: '',
    id: 1
  }
}).then(res => {  
  // 返回的数据
  console.log(res);   
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

二、封装网络请求

为什么要进行封装?假设每发起一次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'
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

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

devServer: {
    proxy: {
      '/proxyApi': {
        target: 'http://dev.xxx.com',
        changeOrigin: true,
        pathRewrite: {
          '/proxyApi': ''
        }
      }
    }
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

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'
      }
    },
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

3. 请求拦截器

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

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在 token
    // 如果存在,则统一在 http 请求的 header 都加上 token
    token && (config.headers.Authorization = token)
    return config
  },
  error => {
    return Promise.error(error)
  })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

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)
  }
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

5. 导出

export default request;
  • 1.

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
 })
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

7. 页面中调用

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

getList ({ id: 2 }).then(res => {
  console.log(res)
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

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

三、小结

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
11
收藏 2
回复
举报
11
3
2
3条回复
按时间正序
/
按时间倒序
xjj前端妹_雅
xjj前端妹_雅

逻辑清晰,赞一个~

 

回复
2022-5-25 09:19:56
xjj_snntH
xjj_snntH

学到了

回复
2022-5-25 09:53:28
xjj_xnkl
xjj_xnkl

非常实用

回复
2022-6-1 19:17:49
回复
    相关推荐