Vue中 对 axios 进行二次封装来发送请求

一、几种发发请求的方式

• 1、在jQuery中 我们向后端发送请求 使用的是 $.ajax
• 2、在原生中 我们使用的是 XML 来发送请求
• 3、在Vue中 通常使用 axios 来发送请求

二、axios

• 1、通常我们不直接使用 axios
• 2、因为axios中没有做同步异步的处理，所以同步异步 需要我们手动封装

• 3、通常情况下，我们需要在vue项目中去手动创建axios和api文件夹

  
  
  

三、封装post和get请求

• 封装时采用 es6中 Promise对象
  Promise对象 (是一个构造函数)，是es6中 异步编程的一种解决方案
  (目前最先进的解决方案 就是 async await 的搭配)
  async 和 await 的实现，是通过 Promise来实现的

• 好处：
  1、防止回调地狱
  2、提高代码可读性
  3、像同步一样去执行异步操作

• 这里使用promise来封装 axios中的post和get请求
  1、resolve 请求成功后， 数据正常，使用此方法返回正常数据
  2、reject 请求成功后， 数据异常，使用此方法返回异常数据
  3、.then() 是promise中 请求成功时执行的方法，类似于ajax中的 success
  4、.catch 是promise中 请求失败时执行的方法，类似于ajax中的 error

• 首先引入axios模块
  import axios from 'axios';

• 封装post和get请求的代码

export default {
    // 这里使用promise来封装 axios中的post请求
    // 自己定义的post方法
    post(url, data_ = {}) {
        // 在自己定义的post方法中，将promise的实例化对象返回
        return new Promise((resolve, reject) => {

            // 在promise中使用 axios 中的post请求
            // 发送请求
            axios.post(url, {
                params: data_,
            }).then((res) => {
                return resolve(res.data);
            }).catch((err) => {
                return reject(err)
            })
        });
    },

    // 定义一个get方法
    get(url, data_) {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                params: data_,
            }).then((res) => {
                return resolve(res.data);
            }).catch((err) => {
                return reject(err);
            })
        })
    },
}

四、在api的文件夹中引入我们封装好的post和get请求

• 这里会产生一个跨域问题
  1、三同协议 ： 同协议、同域名、同端口
  2、三同协议中，但凡有一个不同，都会产生跨域的问题
  3、后端api http://127.0.0.1:3000/api/admin/getAllUsers
  4、 前端服务器：http://localhost:8081/#/text
  5、对比以后就会发现很明显 端口号不同 所以跨域 无法进行数据交互
  6、 解决方法：在 vue.config.js中 设置跨域处理
  
  

• 先引入封装好的axios
  import axios from '@/axios/axios';

• 封装查询所有数据的方法

export default {
    async getAllUsers(){
        //此处的api接口是我之前写好，用哪个接口写哪个接口
        return await axios.post('/vueapi/api/admin/getAllUsers');
    }
}

五、到页面文件去请求数据

• **在哪个页面请求数据就将api.js引入
  import api from '@/api/user.js';
• 定义一个请求数据的方法

   data(){
        return{
            dataList : '',  //将请求到的数据存放到dataList中
        }
    },
   methods : {
        //在哪里用就将这个方法调用，数据就可以出来
        async getAllUsers(){
            let res = await api.getAllUsers();
            this.dataList = res;
        },
    }