技术简介
- Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
安装Axios
npm install axios
Vue引入Axios配置与请求方法封装
import axios from "axios";
// 超时时间是5秒
axios.defaults.timeout = 5000;
// 允许跨域
axios.defaults.withCredentials = true;
// Content-Type 响应头
axios.defaults.headers.post["Content-Type"] =
"application/x-www-form-urlencoded;charset=UTF-8";
// 基础url
// axios.defaults.baseURL = 后台接口地址;
axios.defaults.baseURL = 线上生产环境地址;
/**
* 封装get方法
*/
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, { params: params })
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err);
});
});
}
/**
* 封装post方法
*/
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios
.post(url, data)
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err);
});
});
}
请求后台接口写法
import { get, post } from "./http";
//带参
export const 自定义接口名 = params => get(`后台接口名`, params);
export const 自定义接口名= id => get(`后台接口名?id=${id}`);
// encodeURIComponent可把字符串作为 URI 组件进行Base64编码,使中文在url传输成功
export const 自定义接口名 = 字符串变量名 => get(`后台接口名/` + encodeURIComponent(字符串变量名));
//无参数写法
export const 自定义接口名 = () => get(`后台接口名`);