ios 请求失败封装_详解vue axios封装请求状态的错误

vue axios封装请求状态的错误

这篇文章主要知识点是关于vue,axios,封装,错误，vue axios封装请求状态的错误，的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书

vue axios封装请求状态的错误

以下是vue axios封装请求状态的错误的实例代码

/**

* axios配置,输出为vue组建

* */

import axios from 'axios';

import qs from 'qs'

import CookiesJS from 'js-cookie'

import router from '../router'

// http request 拦截器

axios.interceptors.request.use(

config => {

config.headers = {

'Content-Type': 'application/x-www-form-urlencoded'

};

// 在post请求发送出去之前，对其进行编码

if (config.method === 'post') {

config.data = qs.stringify(config.data);

}

return config;

},

err => {

return Promise.reject(err);

});

// http response 拦截器

axios.interceptors.response.use(

response => {

return response;

},

error => {

if (error.response) {

console.log("请求错误");

console.log(error.response.status);

switch (error.response.status) {

case 401:

// store.dispatch('logout');

console.log("401");

break;

case 404:

router.push('/Error/Error404');

break;

case 500:

router.push('/Error/Error500');

}

}

return Promise.reject(error);// 返回接口返回的错误信息

});

export default axios;

---------------------

vue中axios的封装

第一步还是先下载axios

cnpm install axios -S

第二步建立一个htttp.js

import axios from 'axios';

import { Message } from 'element-ui';

axios.defaults.timeout = 5000;

axios.defaults.baseURL ='';

//http request 拦截器

axios.interceptors.request.use(

config => {

// const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie

config.data = JSON.stringify(config.data);

config.headers = {

'Content-Type':'application/x-www-form-urlencoded'

}

// if(token){

// config.params = {'token':token}

// }

return config;

},

error => {

return Promise.reject(err);

}

);

//http response 拦截器

axios.interceptors.response.use(

response => {

if(response.data.errCode ==2){

router.push({

path:"/login",

querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转

})

}

return response;

},

error => {

return Promise.reject(error)

}

)

/**

* 封装get方法

* @param url

* @param data

* @returns {Promise}

*/

export function fetch(url,params={}){

return new Promise((resolve,reject) => {

axios.get(url,{

params:params

})

.then(response => {

resolve(response.data);

})

.catch(err => {

reject(err)

})

})

}

/**

* 封装post请求

* @param url

* @param data

* @returns {Promise}

*/

export function post(url,data = {}){

return new Promise((resolve,reject) => {

axios.post(url,data)

.then(response => {

resolve(response.data);

},err => {

reject(err)

})

})

}

/**

* 封装patch请求

* @param url

* @param data

* @returns {Promise}

*/

export function patch(url,data = {}){

return new Promise((resolve,reject) => {

axios.patch(url,data)

.then(response => {

resolve(response.data);

},err => {

reject(err)

})

})

}

/**

* 封装put请求

* @param url

* @param data

* @returns {Promise}

*/

export function put(url,data = {}){

return new Promise((resolve,reject) => {

axios.put(url,data)

.then(response => {

resolve(response.data);

},err => {

reject(err)

})

})

}

第三步

在main.js中引入

import axios from 'axios'

import {post,fetch,patch,put} from './utils/http'

//定义全局变量

Vue.prototype.$post=post;

Vue.prototype.$fetch=fetch;

Vue.prototype.$patch=patch;

Vue.prototype.$put=put;

最后在组件里直接使用

mounted(){

this.$fetch('/api/v2/movie/top250')

.then((response) => {

console.log(response)

})

},

其余的方法一样

以上就是本次给大家分享的全部知识点内容总结，大家还可以在下方相关文章里找到解决axios.interceptors.respon、

spring+springmvc+mybatis整合注、

vue项目中使用md5加密以及、

等计算机编程文章进一步学习，感谢大家的阅读和支持。

展开 +

收起 -