一、axios封装
axios中文文档
https://www.axios-http.cn/
axios的安装
//npm
npm install axios
//yarn
yarn add axios
在src目录下创建utils文件夹创建index.js
//index.js
//导入axios
import axios from 'axios'
//创建axios实例
const axios = axios.create({
//统一的url前缀
baseURL:"http://localhost:8080",
//超时时间
timeout:5000,
//自定义请求头
headers:{
'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
})
//request请求拦截
axios.interceptors.request.use(config => {
//判断token是否存在，存在则向请求头添加token信息
if(sessionStorage.getItem("token")){
config.headers.Authorization = sessionStorage.getItem("token")
}
return config
}),err => {
//对请求错误进行处理
return Promise.reject(err)
}
//response 响应拦截
axios..interceptors.response.use(response => {
const date = res.date
//成功获取信息
if(date.code == 200){
return xxx
}
return response
}),err => {
//对响应错误进行处理
return Promise.reject(err)
}
export default axios
二、api接口封装
第一步
//index.js
//npm i qs 安装qs
import QS from 'qs'
//get接口封装
export funtion get(url,params) {
return new Promise((resolve,reject) => {
axios.get(url,params).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
//post接口封装
export funtion post(url,date) {
return new Promise((resolve,reject) => {
axios.post(url,date).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
第二步、在src目录下创建api文件夹
//login.js
import {
post } from '../utils/index'
//登录接口
export const Login = date => post('/api/login',date)
封装好的接口使用
//Login.vue
//导入封装好的接口
import {
Login } from './api/login'
// const login = ()=>{
// Login(LoginFrom).then(res=>{
// console.log(res)
// }).catch(err=>{
// console.log(err)
// })
// }
const Login = async()=> {
let res = await Login(date)
console.log(res)
}
完整的index.js
//index.js
//导入axios
import axios from 'axios'
//创建axios实例
const axios = axios.create({
//统一的url前缀
baseURL:"http://localhost:8080",
//超时时间
timeout:5000,
//自定义请求头
headers:{
'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
})
//request请求拦截
axios.interceptors.request.use(config => {
//判断token是否存在，存在则向请求头添加token信息
if(sessionStorage.getItem("token")){
config.headers.Authorization = sessionStorage.getItem("token")
}
return config
}),err => {
//对请求错误进行处理
return Promise.reject(err)
}
//response 响应拦截
axios..interceptors.response.use(response => {
const date = res.date
//成功获取信息
if(date.code == 200){
return xxx
}
return response
}),err => {
//对响应错误进行处理
return Promise.reject(err)
}
//get接口封装
export funtion get(url,params) {
return new Promise((resolve,reject) => {
axios.get(url,params).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
//post接口封装
export funtion post(url,date) {
return new Promise((resolve,reject) => {
axios.post(url,date).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
export default axios