vue-axios的总结及项目中的常见封装方法。
丶Serendipity丶 人气:0前言
我们知道 vue 2.0版本开始推荐使用 axios 来完成前端 ajax 请求，axios 是一个基于Promise 的 http 库，可以用在浏览器和 node.js 中，axios 成为vue全家桶的一个重要部分，对前后端接口请求起着必不可少的作用，本文主要总结一下 axios 的一些小知识点和项目中常见的需要封装的方法。
正文
1.axios 是什么？
axios 是一个基于 Promise 的 http 库，可以用于浏览器和 node.js 中，在浏览器中创建 XMLHttpRequest 对象（基于ajax的一种封装），然后调用该对象的一些方法实现对后端数据接口的请求，在 node.js 中用于创建 http 请求，支持 Promise Api，可以使用 async/await 语法糖书写，便于拦截请求和响应，并对请求和响应的数据进行处理，自动转换 JSON 数据格式，同事用于客户端支持防御 XSRF。且目前主流浏览器都支持该库。
常见的安装方式有以下两种：
（1）使用 cdn 方式，代码中直接引入下面脚本即可，这种方式适用于小型项目，比如学习的小 demo 等。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
（2）使用 npm 方式，直接在命令行中添加即可。
npm install axios
2.axios 常见用法？
axios中常用的请求配置如下，只有指定的url是必须项，其他存在默认配置项，method不特殊指定，默认方法为 get 。
{
url: '/user',
// `url` 是用于请求的服务器 URL
method: 'get',
// default `method` 是创建请求时使用的方法
baseURL: 'https://some-domain.com/api/',
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `headers` 是即将被发送的自定义请求头
params: {
ID: 12345
},
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象，`params` 是即将与请求一起发送的 URL 参数
timeout: 1000,
// 如果请求话费了超过 `timeout` 的时间，请求将被中断，`timeout` 指定请求超时的毫秒数(0 表示无超时时间)
withCredentials: false,
// default `withCredentials` 表示跨域请求时是否需要使用凭证
responseType: 'json',
// default `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseEncoding: 'utf8', // default
onUploadProgress: function (progressEvent) {
// `onUploadProgress` 允许为上传处理进度事件
// Do whatever you want with the native progress event
},
onDownloadProgress: function (progressEvent) {
// `onDownloadProgress` 允许为下载处理进度事件
// 对原生进度事件的处理
},
}
（1）get 请求
axios.get('url',{params:{
//这里是请求参数
}})
.then(res=>{
//这里是响应后操作
})
.catch(err=>{
//异常捕获
})
（2）post 请求
axios.post('url',{
name:xxx//参数
},{
headers:xxxx,//请求头信息
})
.then(function(res){
//处理成功的函数 相当于success
})
.catch(function(error){
//错误处理 相当于error
})
（3）all、spread 并发请求
axios.all([
axios.get('url'),
axios.get('url',{params:{type:'sell',page:1}})
])
.then(axios.spread((res1,res2)=>{
//返回结果为一个数组
}))
all()方法入参为一个数组，数组元素是每一项请求，回调函数 .then() 的参数也是一个数组，里面的每一项元素表示前面请求的返回结果，使用了 axios.spread作为该回调函数的参数时，其res1,res2分别代表前面每一项请求的返回结果。
综上这些方法都只使用于小型项目中，或者学习小 demo 中，在工作开发中遇到处理的请求接口较多，
3.axios 在项目中的常见用法？
（1）小型项目中常见封装方法，灵活性较高。
首先创建 axios.js 文件
import originAxios from 'axios'
export default function axios(option){
return new Promise((resolve,reject)=>{
//创建axios实例
const instance=originAxios.create({
baseURL:'/api',
timeout:5000,
headers:''
});
//传入对象进行网络请求
instance(option)
.then(res=>{
resolve(res)
})
.catch(err=>{
reject(err)
})
})
}
然后在需要发送请求接口的地方引入
import {axios} from './axios.js'
axios({method:"get",url:"url",params:{...}})
.then(res=>{
//请求数据后操作
})
.catch(err=.{
//错误处理
})
（2）针对不同请求类型进行二次封装。
/* *url:请求的url
*params:请求的参数
*config:请求时的header信息
*method:请求方法 */
const request = function ({ url, params, config, method }) {
// 如果是get请求 需要拼接参数
let str = "";
if (method === "get" && params) {
Object.keys(params).forEach((item) => {
str += `${item}=${params[item]}&`;
});
}
return new Promise((resolve, reject) => {
axios[method](
str ? url + "?" + str.substring(0, str.length - 1) : url,
params,
Object.assign({}, config)
)
.then(
(response) => {
resolve(response.data);
},
(err) => {
if (err.Cancel) {
} else {
reject(err);
}
}
)
.catch((err) => {
reject(err);
});
});
};
具体使用同上。
（3）基于请求响应拦截进行封装，实际项目开发中常用。
axios 提供的拦截器，用于每次发送请求和得到响应后进行响应的处理。比如在请求拦截中可以在页面中添加 loading 动画，某些请求要求用户必须登录，判断用户是否有token,如果没有就跳转到登录页面等，也可以对请求参数进行序列化操作等 config.data = qs.stringfy(config.params) 等。同样，响应拦截也可以对响应的数据进行过滤，包括响应失败的拦截，可以根据响应状态码进行不同的操作等。具体方法如下：
首先在工具方法文件夹中创建 request.js 文件。这里搭配了token用于判断用户状态，element-ui 组件处理一些错误报错提示。该文件封装暴露了get、post、文件上传方法。
import axios from "axios";
import store from "../store";
import { Message, MessageBox } from "element-ui";
let baseURL = "http://127.0.0.1:3000/";
// 创建axios实例
const service = axios.create({
baseURL: baseURL,
timeout: 5000, // 请求超时时间
headers: { "Content-Type": "application/json;charset=UTF-8" },
});
// axios.defaults.withCredentials = true; // 若跨域请求需要带 cookie 身份识别
axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*"; // 允许跨域
const err = (error) => {
if (error.response) {
let data = error.response.data;
const token = store.getters.token;
switch (error.response.status) {
case 403:
Message({
message: data.message,
type: "error",
duration: 5 * 1000,
});
break;
case 500:
if (token && data.message == "Token失效，请重新登录") {
MessageBox.confirm(
"很抱歉，登录已过期，请重新登录",
"确定登出",
{
confirmButtonText: "重新登录",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
store.dispatch("Logout").then(() => {
window.location.reload(); // 为了重新实例化vue-router对象 避免bug
});
});
}
break;
case 404:
Message({
message: data.message,
type: "error",
duration: 5 * 1000,
});
break;
case 504:
Message({
message: data.message,
type: "error",
duration: 5 * 1000,
});
break;
case 401:
Message({
message: data.message,
type: "error",
duration: 5 * 1000,
});
if (token) {
store.dispatch("Logout").then(() => {
setTimeout(() => {
window.location.reload();
}, 1500);
});
}
break;
default:
Message({
message: data.message,
type: "error",
duration: 5 * 1000,
});
break;
}
}
return Promise.reject(error);
};
// request拦截器
service.interceptors.request.use(
(config) => {
const token = store.getters.token;
if (store.getters.token) {
config.headers["X-Token"] = token;
}
return config;
},
(error) => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
}
);
// respone拦截器
service.interceptors.response.use((response) => {
console.log("response.data", response.data);
return response.data;
}, err);
/*
* get请求
* url:请求地址
* params:参数
* */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
console.log("process.env.BASE_API", process.env.BASE_API);
service({
url: url,
method: "get",
params: params,
})
.then((response) => {
resolve(response);
})
.catch((error) => {
reject(error);
});
});
}
/*
* post请求
* url:请求地址
* params:参数
* */
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
service({
url: url,
method: "post",
data: params,
})
.then((response) => {
resolve(response);
})
.catch((error) => {
reject(error);
});
});
}
/*
* 文件上传
* url:请求地址
* params:参数
* */
export function fileUpload(url, params = {}) {
return new Promise((resolve, reject) => {
console.log("@@@@@@@@@@@params", params);
service({
url: url,
method: "post",
data: params,
headers: { "Content-Type": "multipart/form-data" },
})
.then((response) => {
resolve(response);
})
.catch((error) => {
reject(error);
});
});
}
export default {
get,
post,
fileUpload,
};
然后创建api文件夹，如果接口过多可以对接口进行模块化管理，比如我这 api 下面创建 login.js 文件。
import { get, post,fileUpload } from "../utils/request";
// 登录
export const login = (params) => {
return get("/user/login", { ...params });
};
// 查询用户信息
export const getUserInfo = (params) => {
return get("/user/userInfo", { ...params });
};
// 上传音频文件
export const addRadioApi = (params, file) => {
return fileUpload("/radio/addRadio", { params, file });
};
最后在你的vue文件中就可以使用了，login.vue中使用如下：
import { login } from "../../api/login";
login({ name: "123", password: "123456" })
.then((res) => {
//登录请求后操作
})
.catch((error) => {
//异常处理
});
总结
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。
加载全部内容