封装axios接口请求的思路

装axios接口请求的思路

1、安装axios

npm install axios

2、在src目录下新建一个http文件夹

3.在http下新建两个文件：

api.js(用来统一数据请求接口)；

request.js（封装数据请求方法）；

4、request.js文件

/* eslint-disable quotes */
/* eslint-disable dot-notation */
// 引入axios
import axios from 'axios'
import { Message } from 'element-ui'

const service = axios.create({
  // 请求接口地址
  baseURL: 'https://www.liulongbin.top:8888/api/private/v1',
  // 设置延迟时间
  timeout: 3000
})

// 请求拦截
service.interceptors.request.use(config => {
  console.log('请求被拦截')

  if (config !== 'login') {
    // 存token，获取token
    const token = localStorage.getItem('token')
    console.log(token)
    config.headers["Authorization"] = token
    console.log(config)
  }
  return config
}, _error => {
  console.log(_error)
  // eslint-disable-next-line prefer-promise-reject-errors
  return Promise.reject('请求出错')
})

// 响应拦截
service.interceptors.response.use(res => {
  console.log(res.data)

  var { msg, status } = res.data.meta
  console.log(msg, status)

  if (status === 400) {
    Message.error(msg)
    Promise.reject(msg)
  }

  if (status === 200 || status === 201) {
    const { token } = res.data.data
    token && localStorage.setItem('token', token)
    // 登录成功提示
    Message({
      message: msg,
      type: 'success'
    })
    return {
      flag: 1,
      res: res
    }
  } else {
    Message.error(msg)
    return {
      flag: 2,
      msg: msg,
      result: res
    }
  }
}, error => {
  // eslint-disable-next-line prefer-promise-reject-errors
  return Promise.reject('响应出错', error)
})

// 导出service文件
export default service

5、api.js

// 引入request文件
import request from './request'

// 封装登录接口
export function goLogin (info) {
  return request({
    // 接口地址
    url: '/login',
    // 请求方式
    method: 'post',
    // 参数传递
    data: info
  })
}

6.组件里面调用接口：

// 导入我们的api接口
import { goLogin } from '@/request/api';
//方法里面调用函数

onLoad() {

  // 调用api接口，并且提供了两个参数   

  goLogin ({"参数"}).then(res => {

    console.log(res,"我是vue请求的数据");

  }) 

  }