笔记前端需要了解的axios

最新推荐文章于 2025-11-13 16:02:22 发布

原创最新推荐文章于 2025-11-13 16:02:22 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用Axios库进行HTTP请求的封装，利用Promise实现异步操作，同时展示了如何将请求返回的数据存储到Vuex状态管理库中，以实现全局状态的管理。

特点：

axios 对原生xhr封装从Promise实现版本，符合最新es规范
Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API
它可以拦截请求和响应
它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
安全性更高，客户端支持防御 XSRF

以登录为例：

	userLogin({commit},obj){
      //console.log(obj)
      return axios({
        url:api.userLogin,//接口地址
        method:'post',//请求方式
        data:obj
      }).then(resp=>{
        console.log(resp)//请求返回的数据
        sessionStorage.setItem('token',resp.data.token)//对数据进行操作
        sessionStorage.setItem('clientId',resp.data.data.clientId)//对数据进行操作
        commit('setUser',resp.data.data)//将数据存在vuex中
        console.log(resp.data.data)
        return resp.data
      }).catch(err=>{
        console.log(err)
      })
    }