Vue项目API接口封装的超详细解答

目录

• 前言
• 一、axios是什么？
• 二、API接口封装步骤
• 1.创建拦截器（Interceptor.js）
• 2.创建存放API的文件（http.js）
• 3.使用方法
• 总结

前言

我们在开发的过程中，时常需要去访问服务器，然而每个请求都需要重新去axios访问，过于麻烦，所以我们在这封装了一个进行请求的方法，并且将接口api化，需要使用时直接引入api方法,使用起来非常的简单。

一、axios是什么？

axios 是一个基于Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

二、API接口封装步骤

1.创建拦截器（Interceptor.js）

代码如下（示例）：

import axios from "axios";//原生的axios
//用来拦截用的
axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
//创建一个单例
const http= axios.create({
  baseURL:'接口的前半部分加端口',
  timeout:5000,//响应时间
  // headers:{"Content-Type":"application/json;charset=utf-8"},
})
 
//拦截器  -请求拦截
http.interceptors.request.use(config=>{
  //部分接口需要token
  let token=localStorage.getItem('token');
  if(token){
    config.headers.token=token;
    // config.headers ={
      // 'token':token
    // }
  }
  return config;
},err=>{
  return Promise.reject(err)
})
 
//拦截器  -响应拦截
http.interceptors.response.use(res=>{
  if(res.data.code===2000){
    return Promise.resolve(res.data)
    //这里读者们可以根据服务器返回的数据去自行修改
  }else{
    return Promise.reject(res.data)
  }
},err=>{
  return Promise.reject(err)
});
 
//整体导出
export default http;
 

2.创建存放API的文件（http.js）

代码如下（示例）：

//将拦截器整体导入
import request from '@/Interceptor.js'//导入已经写好的拦截器
 
// 封装所有的API接口
 
export function Login(params){
  console.log(params)
  return request({
    url:'/administrator/login',
    method :'post',
    params:params,
  })
}
 
export function getRoles(params={}){
  return request({
    url:'/Roles/select',
    method :'post',
    params:params,
  })
}
 

3.使用方法

代码如下（示例）：

import { Login } from "@/api/http.js" //按需要去引入方法
 
    Login(Requestparameters).then((res) => {
            if (res.code === 2000) {
              this.$message({
                message: '登录成功!',
                type: 'success',
                duration: 1500
              });
              setTimeout(() => {
                let token= res.data.token;
                localStorage.setItem("token",token);   
                //有需要存token的就可以在这里存储了
                this.$router.push('/index');    
                //这里就可以转到指定的路由
              }, 1550);
            } else {
              this.$message({
                type: 'info',
                message: res.message,
                duration: 1500
              });
            }
          }).catch((err) => {
            console.log(err)
          })

总结

到此这篇关于Vue项目API接口封装的文章就介绍到这了,更多相关Vue项目API接口封装内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！