vue axios 简单封装

先安装 axios

npm install axios

vue axios 简单封装

下面是简单的封装一个 http.js，在此说明 checkStatus 这个方法呢是不一定需要的，根据个人的项目需求吧，也可以直接返回response，交给后面另行处理也行。

或者根据后端返回的状态，在里面进行处理也行。

"use strict";
import axios from "axios";
import qs from "qs";
//添加请求拦截器
axios.interceptors.request.use(
 config => {
 return config;
 },
 error => {
 return Promise.reject(error);
 }
);
//添加响应拦截器
axios.interceptors.response.use(
 response => {
 return response;
 },
 error => {
 return Promise.resolve(error.response);
 }
);
axios.defaults.baseURL = "https://www.xxxx/api";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.timeout = 10000;
function checkStatus(response) {
 return new Promise((resolve, reject) => {
 if (
 response &&
 (response.status === 200 ||
 response.status === 304 ||
 response.status === 400)
 ) {
 resolve(response.data);
 } else {
 reject({
 state: "0",
 message: "网络出现问题"
 });
 }
 });
}
export default {
 post(url, params) {
 return axios({
 method: "post",
 url,
 data: params
 }).then(response => {
 return checkStatus(response);
 });
 },
 get(url, params) {
 params = qs.stringify(params);
 return axios({
 method: "get",
 url,
 params
 }).then(response => {
 return checkStatus(response);
 });
 }
};//如有不懂欢迎加全栈开发交流QQ群：864305860

在vue 项目中，main.js这个文件

import http from "./utils/http";
Vue.prototype.$http = http;

使用 helloworld.vue

//如有不懂欢迎加全栈开发交流QQ群：864305860
methods: {
 async TestPost() {
 try {
 const res = await this.$http.post("/message/socketid", {
 account: "huangenai"
 });
 console.log(res);
 } catch (error) {
 console.log(error);
 }
 },
 async TestGet() {
 this.$http
 .get("/price")
 .then(res => {
 console.log(res);
 })
 .catch(error => {
 alert(error);
 });
 }
}//如有不懂欢迎加全栈开发交流QQ群：864305860

在main.js中将http.js import 进来并暴露到全局使用，在任何vue 页面中就不再需要 import http.js了，而直接通过 this. $http.post this.$ http.get 来使用，在checkStatus中统一异步返回，顺便可以处理错误的情况。

checkStatus方法返回了一个 Promise

链式结构的话看上面那个get的方法，this.$http.get(…).then(…).catch(…)，如果then 里面又来一个 http请求会一层包住一层。

function checkStatus(response) {
 return new Promise(resolve => {
 if (
 response &&
 (response.status === 200 ||
 response.status === 304 ||
 response.status === 400)
 ) {
 resolve(response.data);
 } else {
 resolve({
 state: "0",
 message: "网络出现问题"
 });
 }
 });
}

猜你喜欢