封装axios请求

目的 ： 

为了调用 ajax 方便， 我们可以对 axios 进行一次封装，吧它封装成一个独立的模块，在需要的时候可以直接加载使用

思路 :

1.安装 axios 包 

2.对 axios 进行二次封装，把基地址提前写好

安装axios ：

npm i axios

封装 ： 

创建 src/utils/request.js , 开始在这个文件中写代码 

 

使用自定义方式创建axios实例    (https://www.npmjs.com/package/axios#axioscreateconfig)

// 对axios进行二次封装
//    axios本身是一个独立的库，是对ajax的封装。为了方便在项目中使用，我们对它再次封装
// (1) 接口基地址
// (2) 请求，响应拦截器

import axios from 'axios'

const instance1 = axios.create({
  // 后端服务器1
  baseURL: 'http://toutiao-app.itheima.net' // 请求的基础路径
})

const instance2 = axios.create({
  // 后端服务器2
  baseURL: 'http://api-toutiao-web.itheima.net'
  // timeout: 1000,
  // headers: {'X-Custom-Header': 'foobar'}
})

export { instance1, instance2 }

// 默认导出intance1
export default instance1

调用测试

在app.vue组件中测试一下这个封装的效果 （测试axios的用法代码的效果，后期删除）

<template>
  <div id="app">
    Axios测试
    <van-button type="danger" @click="hTestAxios1">测试axios的效果</van-button>
    <van-button type="primary" @click="hTestAxios2">测试axios的效果-async</van-button>
    <router-view/>
  </div>
</template>
<script>
import { instance2 } from '@/utils/request.js'
// import request from '@/utils/request.js'
export default {
  methods: {
    async hTestAxios2 () {
      try {
        const res = await instance2({
          method: 'GET',
          url: '/app/v1_0/user/channels'
        })
        console.log(res)
      } catch (err) {
        console.log(err)
      }
    },
    hTestAxios1 () {
      instance2({
        method: 'GET',
        url: '/app/v1_0/user/channels'
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

控制台出现以下内容表示成功