Axios

Axios** (a 儿恰斯)**

:用于从后台获取数据

---

---

安装：

npm install axios

>>基础写法

• methods  请求方式
  • get  使用params传参 (kv 键值对)
  • post  使用data传递参数(json)，params 传参也行，但不推荐

=

注意

get 传参 是放在 **params 关键字属性  **中的

接口参数的简写必须写为 { params }， 就是必须要加大括号，

转为 ES5 其实写为 { params: params }

如果不加小括号，其实只是 一个对象， 必须把参数放到 params 属性中，后台才能收到数据。

// todo: 不加大括号是否就是 => url/params 的传参方式？

其实 get 参数也能写在 body 中，post 也能参数传 url 上，主要还是取决于后端

是并且 get 传 kv 可以不是 一定要 写成   ?key=value&key2=value2 的形式

这完全是后端决定的，比较流行的是 http://www.example.com/user/name/chengqm/age/22

=

>>并发请求

>>配置全局 axios 属性(不推荐)

axios.defaults.timeout = 5000;   –请求超时时长

>>创建多个 axios 实例管理不同配置需求

• 就是有的请求 baseURL 不同，或需要的请求超时长不同等
  • 请求时就需要使用不同配置的 axios 实例
  • 

>>对 axios 进行封装

•   在一个独立的文件中封装,然后导出
• 所有简便方式如下：
• 
• 

>>axios 拦截器

**    –还是推荐实例中配置，而非全局**

• request 拦截器
  • 比如 config 中的一些信息不符合服务器要求
  • 每次发送请求显示一个请求图标
  • 加上 token 请求头
  • 
• response 拦截
  • 

>>全局引入：

import Axios from 'axios'

vue 中可以： Vue.prototype.$axios=Axios 原型中 添加 Axios 对象，可以全局使用了

模拟 get 请求   http://123.207.32.32:8000/home/multidata

---

baseURL 配置

---

生产环境和开发环境，接口请求的路径不一样

1.直接配置

Axios.defaults.baseURL=’路径’

2.判断配置

// 判断当前是开发环境还是生产环境 赋予不同的 baseURL 值

const PROD_HOST = "生产环境的服务器路径";
const DEV_HOST = "开发环境的服务器路径";
Axios.defaults.baseURL =
  process.env.NODE_ENV === "production" ? PROD_HOST : DEV_HOST;

3.通过  process.env.VUE_APP_BASE_URL  配置

**    在 vue 根目录下：**

创建环境变量，系统会自动添加

**     **

创建文件

.env.production  写  VUE_APP_BASE_URL=’生产环境的路径‘ 生产环境下，服务器的地址

创建文件

.env.development 写  VUE_APP_BASE_URL=’开发环境的路径‘ 开发环境下，服务器的地址

//Axios.defaults.baseURL= process.env.VUE_APP_BASE_URL

===提取 axiso 的配置（拦截器）===

**    http.js 中配置**

**    main.js 中使用**

**  **      import http from ‘地址’

Vue.prototype.$axios=http

===axios 的 token 配置===

判断账号密码是否正确

**     在 axios 的拦截器**

**    请求  **

let token = sessionStorage.getItem('token')
token && config.headers['auth']= token; // 请求头中添加个认证。参数写啥都行，为了标准写 auth(认证)
res.header('Access-Control-Allow-Headers','Content-Type','auth'); // 跨域的请求头上 要在配置下 auth
return config
// 响应 (token不一定在res.data里面，需要打印出来看)
res data.token && sessionStorage.setItem('token','xxx')
return res；

// 如果有错，就到登录页面去
sessionStorage.removeItem('token')
router.push('/login')
return Promise.reject(err)

===实际项目中，后台接收的参数只能是字符串

get 请求

data: JSON.stringify(data);
data: qs.stringify(data);