1.初始化vue项目
vue init webpack deaxios
cd deaxios
npm install axios --save
2.封装axios
2.1 src文件夹下新建http文件夹,用来放网络请求相关的文件
2.2 src/http文件夹下,创建index.js文件,对axios进行封装
const axios = require('axios');
axios.defaults.baseURL = 'http://192.168.56.100:8888';
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/json';
axios.defaults.transformRequest = data => JSON.stringify(data);
axios.interceptors.request.user(config => {
let token = localStorage.getItem('token')
token && (config.headers.Authorization = token);
return config;
},error => {
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
debugger
return response.data;
}, error => {
debugger
return error
});
export function get(url, params, headers) {
return new Promise((resolve, reject) => {
axios.get(url, {params, headers}).then(res => {
resolve(res.data.ResultObj)
}).catch(err => {
reject(err.data)
})
})
}
export function post(url,params, headers){
return new Promise((resolve,reject) =>{
axios.post(url, params, headers).then((res)=> {
resolve(res.data)
}).catch((err) => {
reject(err.data)
})
})
}
export default axios;
2.3 scr/http目录下创建apis.js文件,用来写接口地址列表
import { get,post } from './index'
export const login = (params, headers) => post("/user/login/", params, headers)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步