参考:
https://www.jianshu.com/p/7a9fbcbb1114
https://www.cnblogs.com/dreamcc/p/10752604.html
一、安装axios
npm i axios -S
二、创建src/utils/axios.js、src/api/api.js
axios.js用于封装axios,api.js用于管理接口
三、axios.js
// axios.js import axios from "axios"; // 部分数据需要存进store或取出 import store from "@/store" // 请求错误时提示,根据需求引入不同ui import { Toast, MessageBox } from "mint-ui"; // 根据返回值进行页面跳转 import router from "vue-router" // 封装的获取本地token的方法 import { getToken } from "@/utils/auth" const service = axios.create({ // headers: {‘X-Requested-With‘: ‘XMLHttpRequest‘}, // 可以配置headers baseURL: "", // api的base_url timeout: 10000 // request timeout,默认0 }); // 请求头的设置 // axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘; // 添加一个请求拦截器 service.interceptors.request.use( (config)=> { // Do something before request is sent // 获取tonken,一般是从本地获取 // if (store.getters.token) { // config.headers["token"] = getToken(); // } return config; }, function(error) { // Do something with request error return Promise.reject(error); } ); // 添加一个响应拦截器 service.interceptors.response.use( (response)=> { // Do something with response data // 根据返回值做出判断 if (response.code !== 0) { // 不成功时... if (response.code == -1) { // token失效时,清空缓存,跳转至登录页 // store.commit(‘SET_TOKEN‘, ‘‘) // router.push({ // path: "" // }) }else if(){ }else{ // 提示错误信息 Toast({ message: response.msg, position: "top", duration: 2 * 1000 }) } }else{ // 请求成功时 return response; } }, (error)=> { // Do something with response error // 提示错误信息 Toast({ message: error.message, position: "top", duration: 5 * 1000 }) return Promise.reject(error); } ); export default service
四、api.js
// api.js import request from "@/utils/axios"; export function oneApi(val) { return request({ url: "", // 接口 method: "post", // 请求方式 data: val, // 数据 headers: { "Content-Type": "application/x-www-form-urlencoded" } }); } export function twoApi(val) { return request({ url: "", // 接口 method: "post", // 请求方式 data: val, // 数据 headers: { "Content-Type": "application/x-www-form-urlencoded" } }); }
五、使用
import { oneApi} from "@/api/api";
oneApi(params).then(response => {
});
原文地址:https://www.cnblogs.com/jing-zhe/p/12041175.html
时间: 2024-10-28 23:53:13