axios 小白从安装到基础的使用与封装

安装与使用

安装：
npm install --save axios
使用：
import axios from 'axios'

文章下附Giee地址

一、请求类型

get、delete方式类似都可以用params请求，delete可以在请求体中请求，post、put、patch类似都是使用请求体请求并且可以有json/form-data两种方式

GET

get请求的两种写法 (使用config 将参数放在params中)

 	axios.get('/url', {
    	params: {
    		id: 12
    	}
    }).then((res) => {
    	console.log(res)
    })
    //另外一种写法
	axios({
		method: 'get',
		url: '/url',
		params: {
			id: 12
		}
	}).then(res => {
		console.log(res)
	})

POST

post请求 (将参数放在请求体中)，两种方式json/form-data

// applicition/json
 let data = {
 	id: 12
 }
 axios.post('/url', data).then(res => {
 	console.log(res)
 })
 axios({
 	method: 'post',
 	url: '/post',
 	data: data
 })
// form-data 表单提交（图片上传，文件上传）
    let formData = new FormData()
    for (let key in data) {
    	formData.append(key, data[key])
    }
    axios.post('/url', formData).then(res => {
    	console.log(res)
    })

PUT

put 请求 (将参数放在请求体中)，两种方式json/form-data

    // put请求
    axios.put('/put',data).then(res=>{
        console.log(res)
    })

PATCH

patch请求 (将参数放在请求体中)，两种方式json/form-data

    // patch请求
    axios.patch('/patch',data).then(res=>{
        console.log(res)
    })

DELETE

delete (将参数放在请求体中 也可以将参数放在params中)

// delete请求
axios.delete('/delete', {
	params: {
		id: 12
	}
})
axios.delete('/delete', {
	data: {
		id: 12
	}
})

二、并发请求

并发请求：同时进行多个请求，并统一处理返回值

axios.all(
	[
		axios.get('/data.json'),
		axios.get('/city.json')
	]
).then(
	axios.spread((dataRes, cityRes) => {
		console.log(dataRes, cityRes)
	})
)

三、axios实例

使用场景： 后端接口地址有多个，并且超时时长不一样或者业务逻辑不同

axios.create({
	baseURL: 'http://localhost:8080', // 请求的域名，基本地址
	timeout: 1000, // 请求超时时长（ms）
	url: '/data.json', //请求路径
	method: 'get,post,put,patch,delete', // 请求方法
	headers: {
		token: ''
	}, // 请求头
	params: {}, //请求参数拼接在url上
	data: {}, //请求参数放在请求体
})

配置
全局配置、实例配置、请求配置
优先级：全局配置<实例配置<请求配置

    // 1.axios全局配置
    axios.defaults.timeout =1000
    axios.defaults.baseURL = 'http://localhost:8080'
    // 2.axios实例配置
    let instance = axios.create()
    instance.defaults.timeout = 3000
    // 3.axios请求配置
    instance.get('/data.json',{
        timeout:5000
    })

四、拦截器

拦截器：在请求或响应被处理前拦截他们
请求拦截器的用法

// 请求拦截器
 axios.interceptors.request.use(config => {
 	// 在发送请求前做些什么
 	return config
 }, err => {
 	// 在请求错误的时候做些什么
 	return Promise.reject(err)
 })

响应拦截器的用法

 // 响应拦截器
 axios.interceptors.response.use(res => {
 	// 请求成功对响应数据做处理
 	return res
 }, err => {
 	// 响应错误做些什么
 	return Promise.reject(err)
 })

取消拦截器

let interceptors = axios.interceptors.request.use(config => {
    	config.headers = {
    		auth: true
    	}
    	return config
    })
axios.interceptors.request.eject(interceptors)

五、错误处理与取消处理

错误处理：在拦截器中用err，如果某请求后面需要单独处理错误，则使用catch()

// 例子：实际开发过程中，一般添加统一错误处理
    let instance = axios.create({})
    instance.interceptors.request(config => {
    	return config
    }, err => {
    	// 请求错误 一般http状态码以4开头，常见：401超时，404 not found
    	$('#modal').show()
    	setTimeout(() => {
    		$('#modal').hide()
    	}, 2000)
    	return Promise.reject(err)
    })
    instance.interceptors.response.use(res => {
    	return res
    }, err => {
    	// 响应错误处理 一般http状态码以5开头，500 系统错误，502, 系统重启
    	$('#modal').show()
    	setTimeout(() => {
    		$('#modal').hide()
    	}, 2000)
    	return Promise.reject(err)
    })
	instance.get('/data.json').then(res=>{
	    console.log(res)
	}).catch(err=>{
            //单独处理错误样式
	    console.log(err)
	})

六、取消请求

用于取消正在进行的http请求

let source = axios.CancelToken.source()
axios.get('/data.json', {
	cancelToken: source.token
}).then(res => {
	console.log(res)
}).catch(err => {
        //取消请求后返回的messge信息
	console.log(err)
})

// 取消请求(message可选)
source.cancel('cancel http')

七、封装axios

// service 循环遍历输出不同的请求方法
let instance = axios.create({
	baseURL: 'http://localhost:9000/api',
	timeout: 1000
})
const Http = {}; // 包裹请求方法的容器

// 请求格式/参数的统一
for (let key in service) {
	let api = service[key]; // url method
	// async 作用：避免进入回调地狱
	Http[key] = async function(
		params, // 请求参数 get：url，put，post，patch（data），delete：url
		isFormData = false, // 标识是否是form-data请求
		config = {} // 配置参数
	) {
		let newParams = {}

		//  content-type是否是form-data的判断
		if (params && isFormData) {
			newParams = new FormData()
			for (let i in params) {
				newParams.append(i, params[i])
			}
		} else {
			newParams = params
		}
		// 不同请求的判断
		let response = {}; // 请求的返回值
		if (api.method === 'put' || api.method === 'post' || api.method === 'patch') {
			try {
				response = await instance[api.method](api.url, newParams, config)
			} catch (err) {
				response = err
			}
		} else if (api.method === 'delete' || api.method === 'get') {
			config.params = newParams
			try {
				response = await instance[api.method](api.url, config)
			} catch (err) {
				response = err
			}
		}
		return response; // 返回响应值
	}
}

// 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => {
	// 发起请求前做些什么
	Toast.loading({
		mask: false,
		duration: 0, // 一直存在
		forbidClick: true, // 禁止点击
		message: '加载中...'
	})
	return config
}, () => {
	// 请求错误
	Toast.clear()
	Toast('请求错误，请求稍后重试')
})
// 响应拦截器
instance.interceptors.response.use(res => {
	// 请求成功
	Toast.clear()
	return res.data
}, () => {
	Toast.clear()
	Toast('请求错误，请求稍后重试')
})

附：node后台接口服务

后台接口服务目录在gitee代码仓库根目录的axios_node下
如何启动？
进入axios_node目录，首先需要安装依赖npm install，依赖安装完成后输入node index.js启动服务

代码仓库地址 https://gitee.com/EverZc/VueAxios.git

如需文章上方axios X-Mind思维脑图文件，关注微信公众号：文靖撩知识 ，回复 axios 即可领取。