vue2.0中axios请求配置

本文主要是介绍vue2.0中axios请求配置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、vue2.0项目中

1.配置

// axios.js
import axios from 'axios';
import { Message } from 'element-ui';
import router from '../../router/index.js';
//创建axios实例const service = axios.create({timeout: 600000, // 请求超时时间withCredentials: false,
});
//请求拦截
service.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json';config.headers['aiToken'] = JSON.parse(localStorage.getItem('token'));config.url = process.env.VUE_APP_WEB_API + config.url;// get请求缓存处理if (config.params) {config.params.f_rnd = new Date().getTime();} else {config.params = {f_rnd: new Date().getTime(),};}return config;},error => {return Promise.reject(error);}
);//响应拦截器
service.interceptors.response.use(response => {let data = response.data;if (response.config.isExport) {//配置是为了下载返回二进制文档流时候return response;}if (data.code === 200) {return data;} else {if (data.code === 1015) {Message({type: 'error',offset: 12,message: '登录/授权已经过期，请重新登录',duration: 5000,});router.push({ path: '/login' });return;}Message({showClose: true,message: data.message || data.msg,duration: 2000,type: 'error',});return Promise.reject(data);}// return data;},error => {console.log('error：' + error); // 用于调试return Promise.reject(error);}
);export default service;

2.使用

// api.js
import request from '@/assets/js/axios.js';export function wordClould(params) {return request({url: `url`,method: 'get',params,});
}export function adviserWordClould(data) {return request({url: 'url',method: 'post',data,});
}

二、vue2.0+ts项目中如何配置

1.配置

// axios.ts
import axios from 'axios';
import { AxiosResponse, InternalAxiosRequestConfig, AxiosError } from 'axios';
import { Message } from 'element-ui';const request = axios.create({timeout: 50000,withCredentials: false,
});/************************************请求拦截*/
request.interceptors.request.use(//在函数中使用名为 config 的参数，并且该参数必须符合 InternalAxiosRequestConfig<any> 这个自定义类型的定义。function (config: InternalAxiosRequestConfig<any>) {// Do something before request is sentif (config.headers) {config.headers['Authorization'] = 'token';}config.url = process.env.VUE_APP_WEB_API + config.url;return config;},function (error: AxiosError) {// Do something with request errorreturn Promise.reject(error);}
);// 名为 status 的数值属性
interface responseConfig {// 响应结果包含status,0 是成功status: number;
}
/************************************ 响应拦截*/
request.interceptors.response.use(function (response: AxiosResponse<responseConfig>) {if (response.data.status === 200) {return response;}Message.error('后台接口异常，请联系管理员');return Promise.reject(response);},function (error: AxiosError) {return Promise.reject(error);}
);export default request;

2.使用

// types.ts/*** 任意类型的参数*/
export interface paramsType {[key: string]: any;
}

// api.ts
import request from '../utils/axios';
import { paramsType } from '../utils/types';/*** 登录接口* @param userData* @returns*/
export function ApiLogin(data: paramsType) {return request({method: 'POST',url: 'url',data,});
}/*** 获取菜单* @param params* @returns*/
export function APIGetMenu(params: paramsType) {return request({method: 'GET',url: 'url',params,});
}

这篇关于vue2.0中axios请求配置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---