Axios网络请求

Axios是一个基于promise的网络请求库。

第三方的，需要安装。
> 官网：https://axios-http.com/
参考文档：https://www.kancloud.cn/yunye/axios/234845/

## 安装
> npm install --save axios@0.27.2

## 引入
### 组件中引入：
`import axios from "axios"

### 全局引用，直接在main.js文件中引入：
```js
import axios from "axios"

const app = createApp(App);
app.config.globalProperties.$axios = axios
app.mount("#app")

//组件中直接调用
// this.$axios
```
## 网络请求基本示例
### get请求
```js
// axios的get请求
axios({
	method:"get",
	url:"http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php"
}).then(res =>{
	console.log(res.data);
	this.chengpin = res.data.chengpinDetails[0]
})
```
将请求放到mounted生命周期函数中去。

### post请求
> w温馨提示: post请求参数是需要额外处理的
1.安装依赖： npm install --save querystring@0.2.1
2.转换参数格式：querystring.stringify({})

```js
// axios的post请求
axios({
	method: "post",
	url: "http://iwenwiki.com/api/blueberrypai/login.php",
	data: querystring.stringify({
		user_id: 'iwen@qq.com',
		password: 'iwen123',
		verification_code: 'crfvw'
	})
}).then(res =>{
	console.log(res.data);
})
```
同样，也可以放到mounted函数中测试。

### get请求快捷方案
```js
axios.get("http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php").then(res =>{
	console.log(res.data);
	this.chengpin = res.data.chengpinDetails[0]
})
```

### post请求快捷方案
```js
axios.post("http://iwenwiki.com/api/blueberrypai/login.php", querystring.stringify({
	user_id: 'iwen@qq.com',
	password: 'iwen123',
	verification_code: 'crfvw'})).then(res =>{
	console.log(res.data);
})
```

> d 如果全局中引入了话，只需要在组件中使用的时候，使用this.$axios,而不再是axios了。

## Axios网络请求的封装
日常应用过程中，一个项目中的网络请求会很多，此时一般会采用的方案是将网络请求进行封装。

### 创建utils目录，构建request.js
utils目录用于存放一些网络请求的方法，如request.js文件
```js
import axios from "axios"
import querystring from "querystring"

const instance = axios.create({
	//网络请求的公共配置
	timeout: 5000
})

//构建一个处理错误的函数
const errorHandle = (status, info) => {
	switch(status){
		case 400:
			console.log("语义错误");break;
		case 401:
			console.log("服务器认证失败"); break;
		case 403:
			console.log("服务器拒绝访问");break;
		case 404:
			console.log("地址错误"); break;
		case 500:
			console.log("服务器遇到意外");break;
		case 502:
			console.log("服务器无响应"); break;
		default:
			console.log("dddd", info);break;
	}
}

// 拦截器最常用的

// 发送数据之前
instance.interceptors.request.use(
	config =>{
		//config: 包含着网络请求的所有信息
		if(config.method === "post"){
			config.data = querystring.stringify(config.data);
			console.log(config);
		}
		
		return config;
	},
	error => {
		return Promise.reject(error);
	}
)

// 获取数据之前
instance.interceptors.response.use(
	response => {
		return response.status === 200 ? Promise.resolve(response) : Promise.reject(response)
	},
	error =>{
		const { response } = error;
		// 错误的处理才是我们最需要关注的地方
		errorHandle(response.status, response.info);
	}
)

export default instance;
```
> 封装好之后，并不能直接在组件中那样使用了。

### 创建api目录
api存放所有网络请求
- path.js 用于存放所有路径

```js
const base = {
	baseUrl: "http://iwenwiki.com",//公共的网址路径
	chengpin: "/api/blueberrypai/getChengpinDetails.php",
	login: "/api/blueberrypai/login.php",
	// 许多路径都可以放到这儿
}

export default base; //把base导出
```

- index.js用于存放所有网络请求

```js
import instance from "../utils/request"
import path from "./path"

const api = {
	//成品详情地址
	getChengpin() {
		return instance.get(path.baseUrl + path.chengpin)
	},
	// post请求进行login
	postLogin(){
		return instance.post(path.baseUrl + path.login, {
				user_id: 'iwen@qq.com',
				password: 'iwen123',
				verification_code: 'crfvw'
			})
	}
	//在这儿，可以放很多网络请求
}

export default api;
```

### 组件进行调用
```html
<template>
	<div class="hello">
		<h1>Axios使用 {{ msg }}</h1>
	</div>
</template>

## 网络请求跨域解决方案
js采取的是同源策略，同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在**服务器域名，端口，协议相同**的数据接口上的数据，这就是同源策略。

![](/media/202209/2022-09-14_173101&LIMeHb7wd2ZTtv5QrlOn.png)

### 目前主流的跨域解决方案有两种
- 后台解决：cors
- 前端解决：proxy

### 前端解决方法：proxy
vue.config.js文件中配置：
```js
devServer:{
	proxy:{
		'api':{
		  target:'http://iwenwiki.com/',
		  changeOrigin: true
	  }
  }
 }
```
然后组件中使用的时候：
```js
axios.get('/api/FingerUnion/list.php').then(res => {
	console.log(res.data);
});
```