axios 封装 模块化

 utils/reuqst.js

import axios from 'axios'
import router from '../router';
//添加基础路径
// axios.defaults.baseURL = 'http://api-toutiao-web.itheima.net/mp/v1_0/'

// 添加请求拦截器，在请求头中加token,Cookie
axios.interceptors.request.use(
    config => {
        //添加基础路径
        config.baseURL = "http://api-toutiao-web.itheima.net/mp/v1_0/"
        if (config.url !== 'authorization') {
            config.headers.Authorization =
             'Bearer ' + sessionStorage.getItem('myToken');
        }
        // if (sessionStorage.getItem('myToken')) {
        //     config.headers.Authorization = 'Bearer ' + sessionStorage.getItem('myToken');
        // }
        // if (localStorage.getItem('Cookies')) {
        //     config.headers.Cookies = localStorage.getItem('Cookies');
        // }
        return config;
    }, error => {
        //请求失败做一些处理
        return Promise.reject(error);
        //等价于上边的写法
        // return new Promise(function (resolve, reject) {
        //     reject(error)
        // })
    });


// Promise.resolve('xxx').then(res => {
//     console.log(res);
// })
//等价于上边的
// new Promise(function (resolve, reject) {
//     resolve('xxx')
// }).then((res) => { console.log(res);})

//配置响应拦截器 返回数据前触发 可以对数据进行一些处理
axios.interceptors.response.use(function (response) {
    //response表示axios包装的返回相关的信息
    // console.log(response.data);
    //这里调用返回response.data的话,对返回的数据进行包装 简化一层data
    return response.data
}, function (error) {
    // console.log(error, '**********');
    //如果token失效,那么后端返回401（未授权）,需要删除toke,跳转到登录页
    if (error.response.status === 401) {
        sessionStorage.removeItem('myToken')
        router.push('/login')
        return
    }
    return Promise.reject(error)
})

export const request = (options) => {
    return axios({
        method: options.method,
        url: options.url,
        data: options.data,
        params: options.data
        // headers: { Authorization: 'Bearer ' + sessionStorage.getItem('myToken') }
    })
}
//调用时
// request({
//     method: 'post',
//     url: 'xxxxx',
//     data:data
// })
export default request

api/login.js

import request from "@/utils/request";

//登录接口调用
export const login = (data) => {
    return request({
        method: 'post',
        url: 'authorizations',
        data: data
    })

}

import { login } from '@/api/login.js';  组件引入

methods: {
    handleLogin(formName) {
      this.$refs[formName].validate(async valid => {
        try {
          if (valid) {
            this.loading = true;
            // const res = await axios.post(
            //   'http://api-toutiao-web.itheima.net/mp/v1_0/authorizations',
            //   {
            //     mobile: this.formLabelAlign.mobile,
            //     code: this.formLabelAlign.code
            //   }
            // );
            const res = await login({
              mobile: this.formLabelAlign.mobile,
              code: this.formLabelAlign.code
            });
            console.log(res);
            if (res.message === 'OK') {
              sessionStorage.setItem('myToken', res.data.token);
              this.$message.success('登录成功');
              this.$router.push('/home');
              console.log(res);
            }
            // this.loading = false;
          }
        } catch (error) {
          console.log(error);
          this.loading = false;
          this.$message.error('用户名或密码错误');
        }
      });
    }
}

api/home.js   get请求

import request from "../utils/request";

//获取用户信息
export const getInfo = () => {
    return request({
        url: 'user/profile',
        method: 'get',
        // headers: {
        //     Authorization: 'Bearer ' + sessionStorage.getItem('myToken')
        // }
    })
}

api/articleList.js  get请求带参

import request from '@/utils/request'

export const articleList = (params) => {
    return request({
        method: 'get',
        url: 'articles',
        params: params
    })
}