axios的基本使用

axios的基本使用

1 下载 axios的依赖

npm install axios

2 全局引入 axios

在 main.js 进行引入

import http from 'axios'  //全局引入 axios
// 由于axios 不是一个插件 要想在全局使用将其绑定在原型上
Vue.prototype.$http = http

3 使用axios

home.vue进行实例引入

 mounted() {
    this.$http
      .get("/user?ID=12345")
      .then(function (response) {
        // 处理成功情况
        console.log(response);
      })
      .catch(function (error) {
        // 处理错误情况
        console.log(error);
      })
      .then(function () {
        // 总是会执行
      });
  },

此时看控制台的 network
请求已经发送成功，但是没有对应的后端服务，所以报错为404

axios 的二次封装

创建axios实例

axios 实例创建

将其抽象成一个工具类进行封装

// 在此文件里面进行编写 axios 的工具类
import axios from 'axios' //引入
import config from '../config' //配置文件的引入

//  为真 取文件的开发地址  否则 是生产环境
const baseUrl = process.env.NOOD_ENV === 'development' ? config.baseUrl.dev :  config.baseUrl.pro

// axios 的工具类
class HttpRequest{
    // 拿到地址之后 进行一些配置
    constructor(baseUrl){ //初始化过程
        this.baseUrl = baseUrl
    }

    // 添加一个方法
    getInsideConfig(){
        // 用于定义axios 相关的配置
        const config  = {
            baseUrl:this.baseUrl,
            header:{} //请求头信息
        }
        return config
    }

    // 拦截器相关的函数
    interceptors(instance){
        // 添加请求拦截器
        instance.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        instance.interceptors.response.use(function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            return response;
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            return Promise.reject(error);
        });

    }

    // 接口请求时调用,接收相关的配置
    request(options){
        const instance = axios.create()
        // 接收是传入的相关参数,将函数 还有拿到的参数进行解构
        options = {...this.getInsideConfig(),...options}
        this.interceptors(instance) //调用拦截器
        return instance(options)

    }
}

// 对外暴露 类的实例
export default new HttpRequest(baseUrl)

// 项目的配置文件
// 导出
export default{
    baseUrl:{
        dev:'/api/', //开发环境
        pro:'', //生产环境
    }
}

实例

// 后续 所有的接口请求 均放入到此文件里
import axios from './axios' //与该文件同一级的工具类 axios 文件

// 接口的调用
export const getMenu = (param) =>{
    // 在调用的时候 拿到 request 方法,接收的是对象
    return axios.request({
        url:'/permission/getMenu',
        methods:'post',
        data:param
    })
}

// 生命周期
  mounted() {
    getMenu().then((res) => {
      console.log(res);
    });
  },
};

发出来设置的请求 但是 后台 没有找到