Vue.js-axios封装

目录 一、前言二、安装axios依赖三、封装axios四、封装后端接口五、调用后端接口

一、前言

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
中文网址：http://axios-js.com/zh-cn

二、安装axios依赖

npm install axios --save或cnpm install axios --save

三、封装axios

我是在src目录下新建了request目录并新建了request.js文件来封装axios

引入下面js代码

// 导入axios
import axios from 'axios'

export function request(config) {
  // 创建axios的实例
  const instance = axios.create({
    baseURL: 'http://XXXX', // 后端地址
    timeout: 5000
  })


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

  // 添加响应拦截器
  instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  // 发送真正的网络请求
  return instance(config)
}

四、封装后端接口

我是在request目录下新建了api目录来进行接口封装，以GET请求为例。因为axios已经封装好了后端基本地址，所以url直接写具体的接口地址就行

五、调用后端接口

先导入封装好的后端接口方法，在methods中自定义方法进行后端接口的请求

浏览器控制台打印出结果，请求接口成功