axios

视频地址： https://www.bilibili.com/video/BV1aG4y167Uu/?spm_id_from=333.337.search-card.all.click&vd_source=1bdd66bea139a5dcaef252c4d4e83e6e

跨域

No 'Access-Control-Allow-Origin'报错出现这个就是跨域了

开发环境下设置代理

开发环境：就是还没打包上线。

假设说请求的url是http://localhost:3000/list,出现了跨域。
在vue.config.js文件夹里配置代理。
请求改为/list就可以了，因为前面的已经代理到了，之后重启脚手架。

请求网址里依然是8080，因为只是代理，不是正式请求。

打包后出现请求问题

设置环境变量

开发环境（.env.development）

生产环境（.env.production）

axios二次封装

作用：

• url统一管理方便日后更换
• post请求，需要判断用户是否是登录状态，每次要传递参数都需要写一次，二次封装之后就不需要每次都写了。

https://www.axios-http.cn/docs/interceptors
一般在src/utils/request.js

//1.引入axios
import axios from 'axios'
//2.创建axios对象
const instance = axios.create({
  baseURL: 'http://testapi.xuexiluxian.cn'
});
//3.添加请求拦截器 前端给后端的(还没到后端)
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么 ==>判断用户是否处于登录状态
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

//4.添加响应拦截器 后端给前端的东西
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。 if(response.status == 200){ returnxxxxx}else{xxxxx}
    // 对响应数据做点什么
    //return response.data.data 如果在这里写data，前面app.vue里就可以少写data
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  //axios对象返回的是promise
export default instance 

怎么用

api解耦

作用：

• 单独维护api的请求，会让项目中的所有的“请求”方便管理。
• 很多页面用同一个请求，无需写很多次，直接调用封装好的函数就可以。

src/api/xxx.js
假如说请求课程的


假如说我想要获取不同的分页数。