axios的简单封装即使用

(一)安装

使用npm安装

$ npm install axios

使用yarn安装

$ yarn add axios 

(二) 安装完成以后创建一个request的js文件,将axios和qs引入。

import axios from "axios"
import qs from "qs"
export function request(config) {
	const instance = axios.create({
		baseURL: 'https://localhost:44335/api/Home',
		timeout: 5000,
	})
	console.log(config.data)
	//判断是否用data传值
	if (config.data == undefined) {

	} else {
		// data传值要使用格式
		// config.data=qs.stringify(config.data)
		// config.data=JSON.stringify(config.data)
	}
	//判断网络请求是否为空
	if (config.method == undefined) {
		//为空默认GET请求
	} else {
		config.method = config.method;
	}
	//请求拦截器
	instance.interceptors.request.use(config => {
		return config;
	}, err => {
		console.log(config.method + "请求失败")
	})
	//响应拦截器
	instance.interceptors.response.use(res => {
		return res.data;
	}, err => {
		console.log(config.method + "响应失败")
	})

	return instance(config)

}

(三)因为这里的 baseURL并不是完整的url路径，很多开发当中前面的路径是一致的，后面会因为开发的业务不一样，而改变，现在需要在创建一个关于你业务的专用js文件，用于传输config，我们需要将前面这个request引入。

import {
	request
} from 'e:/.net/Web-Api-2-1/Web-Api-2-1/src/nwork/request.js'
export function postGG(a) {
	return request({
		method: 'post',
		url: '/GG',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8 '
		},
		params: {

		},
		data: a
	})
}

这里的url会和前面的 baseURL自动配对形成完整的一个url地址，这里使用的post请求,因为这里的a传输的是一个FormData对象，所以自定义请求头headers使用的是'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8 '。(完整路径：https://localhost:44335/api/Home/GG)

里面还有一些其他的参数，根据你的业务来决定如：

params是与请求一起发送的 URL 参数,必须是一个简单对象或 URLSearchParams 对象.

data是作为请求体被发送的数据,仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法.

 transformRequest允许在向服务器发送前，修改请求数据，它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法

transformResponse在传递给 then/catch 前，允许修改响应数据

(四)使用我们封装的方法

 我们需要将postGG()方法进行引用

import {
		postGG
	} from '../../nwork/amain.js'

 这里我创建了一个点击事件onfile()，在点击后会触发我们引用的postGG()方法进行网路请求，该方法将a传输到后端，即完成了网络请求。

methods: {
	onfile() {
		let a = new FormData();
		postGG(a).then(res => {
			console.log(res)
		}).catch(err => {
			console.log(err)
		})
	}
},