标签:return headers promise 参数设置 imp url split font 页面
为了统一管理请求,每个项目都会去配置axios;而不是在vue中直接使用,那样不好维护等等
下面是我配置的最基础的axios文件
第一步:首先新建一个axios文件,我是放在router文件下的
import axios from "axios"; import { Toast } from "mint-ui"; // 我用的mint的框架来弹出我的错误返回 大家可以用别的提示(移动端的组件库) import router from "@/router/index.js"; // 默认超时设置 axios.defaults.timeout = 5000; // 相对路径设置 axios.defaults.baseURL = ""; //http request 拦截器 axios.interceptors.request.use( (config) => { // 获取token const token = localStorage.getItem("cc_token"); // 设置参数格式 if (!config.headers["Content-Type"]) { config.headers = { "Content-Type": "application/json", // application/x-www-form-urlencoded }; } // 添加token到headers if (token) { config.headers.token = token; } // 鉴权参数设置 if (config.method === "get") { //get请求下 参数在params中,其他请求在data中 config.params = config.params || {}; let json = JSON.parse(JSON.stringify(config.params)); //一些参数处理 } else { config.data = config.data || {}; //一些参数处理 } return config; }, (err) => { return Promise.reject(err); } ); //http response 拦截器 axios.interceptors.response.use( (response) => { //一些统一code的返回处理 if (response.data.code === 501) { // 登录验证 //做了个示例跳转项目中登录,并记录下相对路径 router.push({ name: "login", //从哪个页面跳转 query: { retUrl: window.location.href.split("#")[1] || "", is_new_user_url: 1, }, }); } return response; }, (error) => { return Promise.reject(error); } ); export default axios
第二步:发送请求,再项目中请求接口基本上是按照业务或者功能划分的
我在src下新建api的文件夹, 然后新建一个login.js 文件,用来放关于登录的接口的
import request from "@/router/axios"; //引入封装的axios,也就是步骤一中的axios文件
//发送get请求 export const getLoginApi = (params) => { return request({ url: "www.baidu.com", method: "get", params: { ...params }, //或者 写成 params,也是可以的
// params, 这是简写 }); };
//发送post请求 这个请求是404因为百度没有post这个接口
export const getLoginApi = (params) => {
return request({
url: "www.baidu.com",
method: "post",
data:params
});
};
第三步:在页面使用
import { getLoginApi } from "@/api/login"; //在对应的vue页面中,引入刚刚的请求接口
//就可以使用了
标签:return headers promise 参数设置 imp url split font 页面
原文地址:https://www.cnblogs.com/m1754171640/p/13705952.html