基础知识点
jsonp
jsonp封装例子
axios本身可以返回一个promise，所以可以直接在它后面加.then，以获取结果
- 举个例子，下面就是axios最简单的一个使用
可以通过method设置使用方式（举例：get）
- 一般是在服务器那端设置跨域
如下图案例 显示第三页的sell类（至于是什么类由自己设置）数据
- 扩展：其实下拉列表显示更多这个功能就是改变page对应的页面，以实现数据更新
除了data是服务器返回的，其他那些是axios这个框架本身给你加上的一些数据
其他那些东西其实是没有用的，可以过滤掉，后面会说
如果你不想url看起来太长，你可以这样，下面两个效果一样
- 当你用post的时候，用data：{}拼接
不一样的公司这&后面传入的参数不同，然后根据这些参数，决定为你传输多少数据（这些数据是从数据库里面查的）
发送并发请求
扩展:将数组展开
补充知识点：
- 数组也是可以解构的，但是用的比较少
- 数组很少通过下标值一个一个去拿元素，一般是通过遍历方式
全局配置
这个图里面上面红框就是全局配置
有很多，用到的时候，去网上查
其实大部分源码都不是用ty框架写的，文件后面加上.d.ts是为了idea编辑器好读取
比如axios源码
axios的实例与模块封装
实例
-
当业务变得非常大的时候 它会搞很多服务器，每个服务器的ip地址不一样
-
比如有三个服务器，
-
我们就要用到反向代理服务器(通过nginx部署)
-
客户端面向的都是这个代理服务器
-
它可以根据哪个服务器目前请求量不是很多来决定去哪个服务器请求
上图：左边客户端，右边服务器
我们在开发的时候一般不会直接用全局请求：axios.all
因为就是为了避免有不同服务器不同ID时 全局url出错
那我们要怎么做？
- 创建axios实例
接下来封装
- 我们不要在我们的每一个.vue文件里面都对第三方东西有依赖（如图），如果第三方的东西有一天不能用了，不维护了，就要一个一个的改。。。。
所以这就是为什么要封装！
- 单独的创建一个文件，在这个文件里对所有组件进行封装，其实这个文件就是个中间件
如图
在src下面创建（名字自取，我一般这样用）
第四种
-
instance（config）括号里面是请求参数，这个函数相当于
-
return instance（）相当于return promise，可以.then/.catch
为什么可以这样呢，通过下面这个源码，我们知道当你通过小括号调用时，返回的是promise(下图蓝色部分)
图红框左侧相当于上图中的instance（config），这个东西本身返回的就是promise。。。所以直接return，不用像方法3包装promise
比如哪一天，我们不用axios了，用Android，我们只需要在这个封装的文件里这样修改一下就行。
axios拦截器
请求成功拦截，请求失败拦截
注意请求成功拦截要给人家返回回去，不然下次请求就没有数据了
请求拦截的作用
响应成功拦截，响应失败拦截
举个响应失败拦截：这里我们提供一个错误接口
没有找到这个接口，显示失败，我们拦截下了这个失败，并且打印了
同理我们也要返回拦截下的数据，而且我们只要返回.date就行
然后我们在main.js里面拿到的就是只有.data里面的数据了
要注意的是：请求是客户端向服务器发出请求，响应是服务器返回数据给客户端
request.js代码
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 2.axios的拦截器
// 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
return config
}, err => {
// console.log(err);
})
// 2.2.响应拦截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log(err);
})
// 3.发送真正的网络请求
return instance(config)
}
