Axios的二次封装(简单易懂)-Toy模板网

这篇具有很好参考价值的文章主要介绍了Axios的二次封装(简单易懂)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

什么是axios？

是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端简单的理解就是ajax的封装
在使用Vue.js框架开发前端项目时会经常发送ajax请求服务端接口在开发过程中需要对axios进一步封装方便在项目中的使用

axios的特性

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

axios的安装

npm install axios -S

一般我们会在项目根目录的src文件夹下新建一个utils文件夹,
在文件夹下放request.js文件,在request.js中首先导入axios，
然后设置属性，比如baseURL（公共地址）和 timeOut (超时时间）
还可以设置响应拦截和请求拦截，在请求拦截中可以设置loading动画的开启和配置请求头的token
在响应拦截中可以关闭loading和根据后端返回的状态码检测token是否有效
最后把server导出

import axios from 'axios'

//创建一个axios
let server = axios.create({
	// 请求公共地址
    baseURL: "http://xxxxxxxxx/api",
    // 超时时间
    timeout: 5000,
})

// 添加请求拦截器
axios.interceptors.request.use((config)=>{
    // 在发送请求之前做些什么
    // 比如判断是否有token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use((response)=>{
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default server

在根目录创建api文件夹统一接口管理,在创建JS文件(api.js)

//引入
import server from "./request.js"; //路劲自己修改

export const login = (params) => {
    return server({
        url: "接口路径",
        method: "post" ,   //后端给什么写什么
        data: params
    })
}

在页面中就可以直接导入使用

import {login} from '@/api/api'  //引入页面

//调用接口
login(){
    let data = {
        userName:"admin",
        passWord:123456
    } 
    login(data).then(res =>{})
}

也可以使用 async 与 await 语法糖文章来源地址https://www.toymoban.com/news/detail-406450.html

import {login} from '@/api/api'  //引入页面

//调用接口
async login(){
    let data = {
        userName:"admin",
        passWord:123456
    } 
    let res = await login(data)
}

到了这里，关于Axios的二次封装(简单易懂)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！