封装 axios
mian.js 中封装 axios（1）
// 配置请求的跟路径 引入 api接口 import axios from 'axios' // 配置进度条 // 安装 npm install --save nprogress // 导入 NProgress包对应的JS和css import NProgress from "nprogress" import 'nprogress/nprogress.css' // NProgress.start(); // NProgress.done(); axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' // 拦截器 //在 request 拦截器中，展示进度条 NProgress.start() axios.interceptors.request.use((config) => { // request请求拦截器 // console.log(config); NProgress.start() config.headers.Authorization = sessionStorage.getItem('token') // 在最后必须 return config return config }) //在response拦截器中，隐藏进度条 NProgress.done() axios.interceptors.response.use((config)=>{ // response响应拦截器 NProgress.done() return config })封装 axios（2）
第一步 (创建)
在 api/request.js
import axios from 'axios'
const request = axios.create({
baseURL: 'http://api-toutiao-web.itheima.net',
timeout: '5000'
// transformResponse: [function (data) {
// try {
// console.log(jsonBig.parse(data))
// // 如果转换成功则返回转换的数据结果
// return jsonBig.parse(data)
// } catch (err) {
// // 如果转换失败，则包装为统一数据格式并返回
// return data
// }
// }]
})
第二步（导入）
在api/user.js 中
import { request } from './request'
// 登录
export function login (data) {
return request({
method: 'POST',
url: '/mp/v1_0/authorizations',
data
})
}
// 获取用户信息（使用）
export function getUserProfile () {
return request({
method: 'GET',
url: '/mp/v1_0/user/profile'
})
}
在文件中使用 api 方法 // 解构出需要使用的 api方法
import { login } from "api/user.js";
/ / 使用 api 方法
const { data: res } = await login(this.loginForm);