axios请求封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了axios请求封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、简单封装

封装get请求

function ajax_get(url,params={}){
    return new Promise(resolve => {
        axios.get(url,{
            params
        }).then(r=>{
            console.log(r.data);
            resolve(r.data)
        })
    })
}

var getBanner = () => ajax_get(baseUrl + "/banner")

var getGoodList = data => ajax_get(baseUrl + "/goodList",data)

2.封装post请求

function ajax_post(url,params={}){
    return new Promise(resolve => {
        axios.post(url,params).then(r=>{
            resolve(r.data)
        })
    })
}

将需封装好的请求export导出

export {
    getBanner，
    getGoodList
}

二、高级封装

1.配置axios

// http.js 这个文件是对axios请求插件的二次封装, 有的请求需要携带token，、可以把token携带的操作放在请求拦截的函数，也就是在发请求时候，先经过请求拦截追加token发给服务器，也可以对服务器响应进行进行优化再返回给客户端 可以设置请求的服务器地址，也可以设置超时时间等。
import axios from "axios"; // 导入原始的请求插件

// 有些post接口无法解析对象类型的请求参数, 可以使用qs模块(node内置模块)把对象类型的数据序列化为查询字符串结构 {name:lisi, age:10} ===> ?name=lisi&age=10
import qs from "qs"

// 请求数据时,展示请求的加载框, 使用element-plus组件库的加载组件
import { ElLoading } from 'element-plus'
let loading = null;


// 功能1 根据环境设置axios发起不同的服务器请求地址, 设置后,发起ajax请求不再拼接基础路径
if(process.env.NODE_ENV == "development"){
    axios.defaults.baseURL = "/cige"  // 开发环境的代理路径
}else if(process.env.NODE_ENV == "production"){
    axios.defaults.baseURL = "https://lianghj.top:8888/api/private/v1"  // 生产环境的原始路径 (项目打包时用这个路径)
}

//功能2 添加超时功能 设置超时时间, 请求超过30秒无响应就判定请求失败
axios.defaults.timeout = 30000 //30s

// 功能3 是否允许跨域请求携带Cookie, 前端设置了该属性为true时，后端需要设置Access-Control-Allow-Origin为前端项目的源地址，不可设置为*；
axios.defaults.withCredentials = true 

// 功能4 在请求头设置(post)请求内容的编码格式
axios.defaults.headers["Content-Type"]="application/x-www-form-urlencoded"

// 功能5 把请求的参数由对象结构转化为查询字符串结构,  转换通过qs第三方进行转换  data就是请求参数
axios.defaults.transformRequest = data =>qs.stringify(data)

// 功能6 axios请求拦截 在发请求之前 对请求进行处理 一般把本地token添加到请求头里面执行登录认证, 这样在发请求时就不用考虑并处理token了
axios.interceptors.request.use(request=>{
    // 请求时开始加载, target参数指定加载框显示的区域
    if(!loading) loading = ElLoading.service({target:".refresh_box"})  
    // console.log("axios请求拦截",request); // config参数是请求的配置信息
    let token = sessionStorage.getItem("token") //从本地取出token
    // 登录授权 请求验证是否有token  需要授权的 API ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌(具体字段由服务器后台定义)
    token && (request.headers.Authorization=token)
    return request
},error=>{
    return Promise.reject(error) // 返回错误
})

// 功能7 axios的响应拦截, 可在这里对响应数据或响应头做处理
axios.interceptors.response.use(response=>{
    if(loading) {      // 响应时结束加载
        loading.close();  
        loading = null;
    }
    // axios响应数据会封装到一层data字段中, 把data字段剥开,返回原始响应
    return response.data 
},error=>{
    return Promise.reject(error)
})

// 功能8 显示请求时的加载框, 见请求拦截和响应拦截

// 最后,返回配置之后的axios
export default axios

封装请求文章来源地址https://www.toymoban.com/news/detail-620135.html

// 导入我二次封装的请求插件
import http from "./http"

// 登录
const postLogin = params => http.post('/login', params);

// 左侧菜单列表
const getMenus = () => http.get("/menus");

// 获取用户列表
const getUsers = params => http.get("/users", { params });

// 修改用户状态
const putUserState = params => http.put(`/users/${params.uId}/state/${params.type}`);

// 添加用户
const postAddUser = params => http.post("/users", params);

// 编辑用户信息
const putUserInfo = params => http.put(`/users/${params.id}`, params);

// 删除单个用户
const deleteUser = params => http.delete(`/users/${params.id}`);

// 分配用户角色
const putUserRole = params => http.put(`/users/${params.uid}/role`,params);

// 获取角色列表
const getRoles = () => http.get("/roles");

// 添加角色
const postAddRole = params => http.post('/roles', params);

// 编辑角色信息
const putRolesInfo = params => http.put(`/roles/${params.id}`, params);

// 删除角色
const deleteRoles = params => http.delete(`/roles/${params.id}`);

// 所有权限列表
const getRights = params => http.get(`/rights/${params.type}`);

// 删除角色指定权限
const deleteRightForRole = params => http.delete(`/roles/${params.roleId}/rights/${params.rightId}`);


// 图片上传地址
const uploadUrl = http.defaults.baseURL + "/upload";

// 图片上传 
const postImg = formData => http({
    url: "/upload",
    method: "post",
    headers: { 
        // 文件上传的请求头需要设置数据类型multipart/form-data
        "Content-Type" : "multipart/form-data"
    },
    // 注意： 请求体中使文件数据， 不是对象， 不需要（qs）处理请求体
    transformRequest: data => data,
    data: formData  // 文件数据要放到formData对象中
})

export{
    .....
}

到了这里，关于axios请求封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！