axios封装

一、为什么要封装axios

• 1、统一请求默认配置
• 2 、扩展axios方法（axios自身不支持jsonp方法，可以扩展一个）
• 3 、拦截请求与相应（加载提示，添加请求头 token权限）
• 4 、请求的集中管理

二、axios封装

1.安装axios插件

打开命令符进行安装插件

npm i axios

2.在utils里新建文件夹request.js，对axios进行封装

封装axios

//1.引入axios插件
import theAxios from 'axios'

//2.封装axios
const axios = theAxios.create({
  baseURL: 'http://toutiao.itheima.net', // 基地址
  timeout: 20000// 登录超时时间
})
// 3.导出axios,
//导出方式一：直接导出axios
  export default axios
//导出方式二：此种写法是为了防止更新request.js里封装网络请求的工具把axios换成jquery的$.ajax
export default ({ url, method = 'GET', params = {}, data = {}, headers = {} }) => {
  return axios({
    url,
    method,
    params,
    data,
    headers
  })

//   换成$.ajax写法
//   return new Promise((resolve, reject) => {
//     // 判断如果params有值, 需要自己写js代码, 把params对象里key和value拼接到url上
//     $.ajax({
//       url,
//       data,
//       headers,
//       type: method,
//       success: (res) => {
//         resolve(res)
//       },
//       error: err => {
//         reject(err)
//       }
//     })
//   })
}

3.在api里新建文件夹index.js，对接口进行集中管理

//引入utils里封装好的axios
import axios from '@/utils/request.js'

//调用接口方法
export const getAllChannelsAPI = () => axios({
  url: '/v1_0/channels',
  method: 'GET'
})

4.在对应页面调用接口

<script>
//引入接口方法
import { getAllChannelsAPI } from './api/index'

export default {
  async created () {
  //使用接口
  //基本格式：getAllChannelsAPI().then(res=>{}).catch(err=>{})
    const res = await getAllChannelsAPI()
    console.log('数据111111111111', res)
  }
}
</script>