1. Axios 封装与使用

Axios 封装与使用

• 概述

  Axios 是一个基于 promise 的 HTTP 库，用于发送网络请求，可以用在浏览器和 node.js 中使用。

• 安装

  npm install axios --save
  

• Axios 封装与使用

  为便于项目的后期维护和 Axios 库的替换，在项目中需将 Axios 进行二次封装。
  

  request.js 内容

  import axios from 'axios'
  
  export function request(config) {
      // 创建Axios实例，并进行基本参数配置
      let instance = axios.create({
        baseURL: 'http://127.0.0.1:9000',
         headers: {
             version: 'v1'
         },
         timeout: 5000,
      })
  
      // 配置请求和响应的拦截
      instance.interceptors.request.use(config => {
          // 1. 如用于整理给服务器的数据
          // 2. 如每次发送网络请求时，在界面中进行提示
          // 3. 如token等必须携带的信息检测
          console.log(config)
          return config
      }, error => {
          return error
      })
      instance.interceptors.response.use(response => {
          return response.data
      }, error => {
          return  error
      })
  
      // 调用Axios实例，发送真正的网络请求，并返回。
      return instance(config)
  }
  

  调用

  import { request } from "@/network/request"
  
  request({
    method: 'get',
    url: ''
  }).then(data=>{
    console.log(data)
    this.data = data
  }).catch( err=>{
    console.log(err)
  })