从零开始搭建项目,使用的是若依的ajax封装,下面是简单的封装模板

import axios from 'axios'
// 创建axios实例
const service = axios.create({
  // 请求的基础url 就是开头前缀
  baseURL: 'http://123.132/',
  // 超时
  timeout: 10000
})
// 请求拦截器
service.interceptors.request.use(
config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (!isToken) {
    config.headers['Authorization'] = 'Bearer ' + '后端给你的token' // 添加token
  }
  return config
}, 
error => {
// 请求失败的回调
  console.log(error)
  Promise.reject(error)
}
)

// 响应拦截器
service.interceptors.response.use(
res => {
    // 获取返回的状态码 
    const code = res.data.code

    if (code === 200) {
    // 请求成功 返回数据
    return res.data
    } else {
     // 请求异常的处理
    }
  },
  error => {
    // 处理失败的回调
  }
)
// 导出实例
export default service

 编写接口

// 引入实例
import request from 'request'

// 方法
export function login(data) {
  return request({ // 返回封装好的request
    headers: {
      isToken: false // 如上封装的是否需要token
    },
    url: '/login', // 请求的url
    method: 'post', // 请求方式
    data: data // 参数
  })
}

页面中使用

// 引入
 import { login } from './login'
// 使用
login(obj).then(response => {
// 处理数据
})

两个拦截器都是两个参数,分别是成功的回调函数和失败的回调函数,在此进行统一处理,非常方便,比如后端会在请求失败时返回具体的提示,我们就可以直接在此统一编程,给用户提示错误信息来优化我们程序的交互

参考若依 若依官网=》若依

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐