这是我参与「第四届青训营 」笔记创作活动的第13天

1.网络请求模块的选择(了解)

1.Ajax

0. 传统的ajax是基于XHR的
1. 为什么不用它：配置和调用方式非常混乱，编码麻烦，所以真实开发中很少直接使用，而是使用jQuery-Ajax

2.jQuery-Ajax

0. 相对于传统的Ajax非常好用
1. 为什么不用它：首先在vue的整个开发中不需要使用jQuery，完全没有必要为了用网络请求就引用这个重量级的框架

3.Vue-resource

0. 体积相当于jQuery小很多
1. 为什么不选择它：因为vue作者去掉了它，并且不会再更新，对以后的项目开发和维护都存在很大的隐患

4.JSONP

0. 使用JSONP往往是为了解决跨域访问的问题
1. 原理

5.axios

0. 功能特点： 在浏览器中发送XHR请求 在node.js中发送http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据

2.axios框架的基本使用

0. axios请求方式
1. axios支持promise
2. 默认情况下，只传url是发送get请求

<script>
//main.js文件里
import axios from 'axios'
axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  method: 'post'//不写则默认是get请求
}).then(res => {
  console.log(res);
})
​
//也可以这样写：
axios.post()
</script>

4. get请求的参数拼接

<script>
//main.js文件里
import axios from 'axios'
axios({
//1.可以是一长串写
//url: 'http://123.207.32.32:8000/home/data?type=sell&page=1',
​
//2.参数拼接的写法：
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'pop',
page: 1
}
}).then(res => {
  console.log(res);
})
</script>

3.axios发送并发请求

0. 同时发送两个请求，两个请求都拿到结果后再往下走
1. 使用axios.all([])，返回的结果是一个数组

<script>
axios.all([axios({
url:……}),axios({
url:……})])
.then(results => {
​
})
</script>

3. 使用axios.spread可将数组[res1,res2]展开为res1，res2

<script>
axios.all([axios({
url:……}),axios({
url:……})])
.then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))
</script>

4. 补充知识点：数组的解构

const names = ['abc','def','gh']
//const names1 = names[0]
//const names2 = names[1]
//const names3 = names[2]
//可以直接写为：
const [names1,names2,names3] = names;

4.axios的全局配置信息相关

0. 在开发中可能很多参数都是固定的，这个时候我们可以进行一些抽取，也可以利用axios的全局配置
1. 用defaults属性：axios.defaults.timeout = 5000//设置请求超时时间
2. 常见的配置选项：应用的时候具体查即可

5.axios的实例和模块封装

1.axios的实例

0. 创建对应的axios的实例

<script>
const instance1 = axios.create({
baseUrL:……，
timeout:……
}) 
instance1({
url: '/home/multidata'
}).then(res => {
console.log(res)
})
​
​
const instance2 = axios.create({
baseUrL:……，
timeout:……,
headers:{}
}) 
</script>

2.模块封装

0. 我们要有一个意识：只要是引用了第三方的东西，千万不能在每一个组件里都对它有依赖，因为一旦它不再维护，则每个地方都要修改，我们需要对这个框架进行封装
1. 在src里添加一个network的文件夹

//request.js文件
//因为可能会有多个实例，而export default只能导出一个
import axios from 'axios'
export function request(config,success,failure) {
  //创建axios的实例(注意不是全局)
  const instance = axios.create({
  baseURL:……,
  timeout:……
  })
  //发送真正的网络请求
  instance(config)
    .then(res => {
  success(res)
  })
    .catch(err => {
  failure(err)
  })
}
​
​
//如何在其他文件使用(eg.main.js)
import {request} from ''./network/request''
request({
url:……,
},res => {
  console.log(res);
},err => {
  console.log(err);
})

3. 方法二

//request.js文件
import axios from 'axios'
export function request(config) {
 const instance = axios.create({
  baseURL:……,
  timeout:……
  })
  //发送真正的网络请求
  instance(config.baseConfig)
    .then(res => {
  config.success(res)
  })
    .catch(err => {
  config.failure(err)
  })
}
​
​
//如何在其他文件使用(eg.main.js)
import {request} from ''./network/request''
request({
baseConfig: {
},
success: function(res) {
},
failure: function(err) {
}
})

4. 方法三

//request.js文件
import axios from 'axios'
export function request(config) {
 return new Promise((resolve,reject) => {
  const instance = axios.create({
  baseURL:……,
  timeout:……
  })
  instance(config)
    .then(res => {
    resolve(res)
  })
    .catch(err => {
    reject(res)
  })
 })
}
​
​
//如何在其他文件使用(eg.main.js)
import {request} from ''./network/request''
request({
url: '',
}).then(res =>{
}).catch(err =>{
}))

5. 最优方案

//request.js文件
import axios from 'axios'
export function request(config) {
  const instance = axios.create({
  baseURL:……,
  timeout:……
  })
}
//这个函数本身返回promise
return instance(config)
​
​
//如何在其他文件使用(eg.main.js)
import {request} from ''./network/request''
request({
url: '',
}).then(res =>{
}).catch(err =>{
}))

6.axios的拦截器的使用

0. axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理
1. 如何使用拦截器 响应失败是指服务器没有给具体的数据，而是给了错误码
2. 记得要return config否则会拦截，则会请求失败
3. 请求拦截的作用： 比如config中的一些信息不符合服务器的要求，可以通过这种方式添加配置信息 比如每次发送网络请求时，都希望显示一个请求的图标，请求成功后，再在响应成功时消失 比如某些网络请求(比如登录(需携带token))，必须携带一些特殊的信息