Vue中axios的封装

1. axios是什么

Vue2.0之后，尤雨溪推荐我们使用axios替换JQuery ajax。

axios 是一个基于Promise的请求库，用于浏览器和nodejs中，本质上浏览器的axios也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

它本身具有以下特征：

  1. 从浏览器中创建 XMLHttpRequest
  2. 支持 Promise API
  3. 客户端支持防止CSRF
  4. 提供了一些并发请求的接口（重要，方便了很多的操作）
  5. 从node.js创建 http 请求
  6. 拦截请求和响应
  7. 转换请求和响应数据
  8. 取消请求
  9. 自动转换JSON数据

2. axios使用方法

2.1 页面引入axios.js

  1. <script src="./axios.min.js"></script>

2.2 配置axios

  1. axios.defaults.baseURL = 'http://localhost:3000/';
  2. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  3. axios.defaults.withCredentials=true;  //允许请求携带cookie

2.3 发送get和post请求

  1. testGet(){
  2.     axios.get('api/getnewslist',{
  3.         params:{    
  4.         }
  5.     })
  6.         .then(function (response) {
  7.         console.log(response.data);
  8.     })
  9.         .catch(function (error) {
  10.         console.log(error);
  11.     });
  12. },
  13. testPost(){
  14.     axios.post('api/news/new', {
  15.         name: '李宁',
  16.         id: '1001'
  17.     })
  18.         .then(function (response) {
  19.         console.log(response.data);
  20.     })
  21.         .catch(function (error) {
  22.         console.log(error);
  23.     });
  24. }

3. axios实现登陆流程

  1. 在登陆页面中，使用axios的post提交请求到服务器
  2. 服务器根据用户输入的账号密码查询数据库
    • 如果用户存在，则登陆成功，给前台返回{code:100,msg:”登陆成功”,user:user}的信息，并且在后台将用户信息保存到session会话中。
    • 如果用户不存在，则登录失败，给前台返回{code:101,msg:”登陆失败”}的信息
  3. 设置axios响应的拦截器，当服务器给客户端返回的状态码是101的时候，说明此时没有登陆，让跳转登陆页面 ```javascript axios.interceptors.request.use(req=>{})

axios.interceptors.response.use( res => { if (res.data.bodyObj && res.data.bodyObj.code) { let code = res.data.bodyObj.code // 10101是未登录状态码 if (code === 101) { location.href = ‘/login.html’ } } return res }, error => { alert(‘请求失败，请稍后重试！’) return Promise.reject(error) } )

  2. <a name="er4q8"></a>
  3. ### 4. 框架使用axios
  4. [Vue](https://www.yuque.com/attitude-w8u4s/dnnweg/spwlsd)  [React](https://www.yuque.com/attitude-w8u4s/dnnweg/xq9ffx)
  5. <a name="77ONu"></a>
  6. #### 4.1 安装依赖
  7. ```javascript
  8. yarn add axios -S

4.2 配置

  1. //main.js下
  2. import axios from 'axios'
  4. axios.defaults.baseURL = "https://music.aityp.com";        //主地址
  5. Vue.prototype.axios = axios;

4.3 请求数据

  1. <Item :data="value" v-for="value of musics" :key="value.id"></Item>
  3. export default {
  4.     name:"All",
  5.     data(){
  6.         return{
  7.             musics:[]
  8.         }
  9.     },
  10.     components:{
  11.         Item
  12.     },
  13.     mounted(){
  14.         this.axios.get("/top/playlist").then(res=>{
  15.             this.musics = res.data.playlists
  16.         })
  17.     }
  18. }