1. 初始vue化项目
vue init webpack deaxios # 使用脚手架创建项目 deaxios( 项目名, 随便取得)
cd deaxios # 进入项目
npm install axios -S # 安装axios
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';
设置默认提交 json
axios.defaults.transformRequest = data => JSON.stringify(data);
把数据对象序列化成 json 字符串
axios.interceptors.request.use(config => {
let token = localStorage.getItem('token');
token && (config.headers.Authorization = token); return config;
}, error => {
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
return response.data;
}, error => {
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、src/http录下创建 apis.js文件, 用来写 接口地址列表
import { get, post } from './index'
export const login = (params, headers) => post("/user/login/", params, headers)