vue参考文档：https://cn.vuejs.org/

axios参考文档：axios中文网|axios API 中文文档 | axios (axios-js.com)

• axios是一个第三方的http类库

• axios底层基于Promise进行了代码的封装

• axios底层基于XMLHttpRequest异步对象

1. 下载安装

npm i axios
// 安装cnpm: npm i cnpm -g
// 使用cnpm下载安装axios
cnpm i axios

1、axios发送get请求

将axios当成一个方法来使用

axios({
    url: '', // 数据接口地址
    method: 'GET', // 设置请求方式(建议大写)
    params: { // 请求参数

    },
    headers: { // 请求头

    }
}).then(function (res) {
    console.log(res);
});

将axios当成对象来使用

axios.get('数据接口地址', {
    params: { // 请求参数

    },
    headers: { // 请求头

    }
}).then(res => {
    console.log(res);
});

2、axios发送post请求

将axios当成一个方法来使用

axios({
    url: '', // 数据接口地址
    method: 'POST',// 请求方式
    data: { // 请求体: 请求参数

    },
    headers: { // 请求头

    }
}).then(res => {
    console.log(res);
});

将axios当成对象来使用

axios.post('数据接口地址', {/*请求体*/ }, {
    headers: { //请求头

    }
}).then(res => {
    console.log(res);
});

3、axios全局配置

全局配置数据接口基础域名

axios.defaults.baseURL='http://localhost:3000/api'

全局配置请求头

axios.defaults.headers.请求头名称='请求头内容';
// 针对get请求设置请求头
axios.defaults.headers.get.auth='get请求';
// 针对post请求设置请求头
axios.defaults.headers.post.auth='get请求';

4、拦截器

请求拦截器

作用: 对每一次ajax请求进行拦截

  // request: 系统参数, 当前请求的一些相关信息
  axios.interceptors.request.use(function(request){
      // 必须将请求对象request返回
      return request;
  });

响应拦截器

 // response: 系统参数, 表示当前请求的响应信息
  axios.interceptors.response.use(function(response){
      // 必须在此处返回响应对象response, 否则在成功处理函数中无法获取响应对象
      return response;
  });

5、axios.create()方法

作用: 创建一个axios的实例对象

// 创建一个axios的实例对象
  const instance=axios.create({
      // 全局设置数据接口基础域名
      baseURL:'http://localhost:3000/api',
      headers:{
          // 全局设置请求头
      }
  });

6、axios.all()方法

• axios.all()是axios提供的一个系统方法( 静态方法 ), 不能通过`axios.create()`方法创建出来的实例对象调用

• 作用: 批量执行数据请求

axios.all([this.getCates(),this.getBanners()]);

7、对axios数据请求进行封装

import Vue from 'vue';
// 导入axios
import axios from 'axios';
// 全局配置数据接口基础域名
axios.defaults.baseURL = 'http://localhost:3000/api';
// 全局设置请求头
// axios.defaults.headers.auth='123';
// 针对get请求生效
// axios.defaults.headers.get.auth='123';
// 针对post请求生效
// axios.defaults.headers.post.auth='123';


// 请求拦截器
// request: 系统参数, 表示当前请求的相关信息
axios.interceptors.request.use(function (request) {
    // console.log(request,'interceptors');
    // 动态设置请求头
    // request.headers.get.auth='abcdefg';
    // request.headers.post.auth='abcdefg';
    request.headers.auth = 'abcdefg';
    return request;
});


// 响应拦截器
axios.interceptors.response.use((response) => {
    console.log(response, 'response');
    // 将数据接口返回的真是数据返回
    return response.data;
});
// 需求: 在vue组件中直接通过this(组件对象)访问axios
// 解决方案: 将axios挂载到Vue的原型对象上
Vue.prototype.$axios = axios;
// 导出
export default axios;

8、跨域请求数据

1、跨域请求常见解决方案

• jsonp

• cors

• 服务器代理

2、vue cli脚手架中配置跨域代理

1. 在项目配置文件vue.config.js中添加如下配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    // 开发服务器配置 
    devServer: {
        proxy: {
            // 代理规则: 和开发服务器之间的一个约定, 如果请求是以/api开头, 就需要开发服务器帮助我们将本次请求转发给真实数据接口服务器
            // /api/getcate  =>  http://localhost:3000/api/getcate
            '/api': {
                // 指定真实数据接口服务器的地址
                target: 'http://localhost:3000'
            }
        }
    }
});

2. 重启开发服务器

 npm run serve

3. 修改`axios`全局配置的数据接口服务器基础域名

axios.defaults.baseURL='/api'

9、系统环境变量

process.env.NODE_ENV

作用: 判断当前是处于开发阶段还是生产阶段, 在开发阶段会返回`development`, 在进行项目最终打包的时候, 会返回`production`

if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = 'http://localhost:3000/api';
}

10、将axios封装成vue插件

import Vue from 'vue';
// 导入axios
import axios from 'axios';
// 全局配置数据接口基础域名
console.log(process.env.NODE_ENV, 'NODE_ENV');
if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = 'http://localhost:3000/api';
}
// 让开发服务器帮助我们转发本次请求
// axios.defaults.baseURL='/api';
// 全局设置请求头
// axios.defaults.headers.auth='123';
// 针对get请求生效
// axios.defaults.headers.get.auth='123';
// 针对post请求生效
// axios.defaults.headers.post.auth='123';
// 请求拦截器
// request: 系统参数, 表示当前请求的相关信息
axios.interceptors.request.use(function (request) {
    // console.log(request,'interceptors');
    // 动态设置请求头
    // request.headers.get.auth='abcdefg';
    // request.headers.post.auth='abcdefg';
    request.headers.auth = 'abcdefg';
    return request;
});
// 响应拦截器
axios.interceptors.response.use((response) => {
    console.log(response, 'response');
    // 将数据接口返回的真是数据返回
    return response.data;
});
// 需求: 在vue组件中直接通过this(组件对象)访问axios
// 解决方案: 将axios挂载到Vue的原型对象上
// Vue.prototype.$axios=axios;

// 封装一个Vue插件
const MyAxios = {
    install: function (Vue, options) {
        // console.log(options,'options');
        axios.defaults.baseURL = options.baseURL;
        Vue.prototype.$axios = axios;
    }
}

// 注册插件
Vue.use(MyAxios, {
    baseURL: 'http://localhost:3000/api'
});

// 导出
export default axios;