一、为什么要封装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>