axios请求封装
分为三步
1、创建axios实例,定义配置规则
//core.js
import axios from 'axios'
import { METHOD } from './config'
//创建带配置项目的axios实例
const instance = axios.create({
baseURL: 'https://api.it120.cc/small4',
timeout: 30000,
//设置请求头,解决获取不到参数
headers:{'Content-Type':'application/x-www-form-urlencoded'},
transformRequest:[function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
})
//请求的基础方法
export function request(method,url,params) {
switch (method) {
case METHOD.GET:
return GET(url, params);
case METHOD.POST:
return POST(url, params);
}
}
//定义请求函数
function GET(url,params) {
return instance.get(url, params)
}
function POST(url,params) {
return instance.post(url, params)
}
2、封装路径方法
//config.js
//统一管理请求方式
export const METHOD = {
GET:'get',
POST:'post'
}
//统一管理路径
export const PATH={
get_url:'/请求路径'
}
3、调用方法
//index.js
import { request } from './core'
import { METHOD, PATH } from './config'
const APIClient = {
//例:
get_home_list(id){
return request(METHOD.GET,PATH.get_url,id)
}
export default APIClient
这只是一个简单的封装,自己也可以配置请求拦截和响应拦截哦