axios的封装和api接口封装

一、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