axios入門筆記

今天在GitHub上看到別人的項目，正好最近打算學學axios，也算是集齊vue全家桶，說不定能夠召喚神龍。

首先要用axios，先引入：npm install axios   而後在你要使用的地方直接import axios from 'axios'便可編寫相應代碼

可直接在src下建立api文件夾存放axios文件（api.js和index.js），就像這樣：

api.js文件中定義封裝請求：

import axios from 'axios';

let base = '';

export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); };

export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); };

export const getUserListPage = params => { return axios.get(`${base}/user/listpage`, { params: params }); };

export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); };

export const batchRemoveUser = params => { return axios.get(`${base}/user/batchremove`, { params: params }); };

export const editUser = params => { return axios.get(`${base}/user/edit`, { params: params }); };

export const addUser = params => { return axios.get(`${base}/user/add`, { params: params }); };

index.js是入口文件：

import * as api from './api';

export default api;

下面說說post請求操做

以實例代碼舉例子：

      handleSubmit2(ev) {
        var _this = this;
        this.$refs.ruleForm2.validate((valid) => {
          if (valid) {    //若是輸入的帳號密碼有值
            
            this.logining = true;   //顯示loading圖標
            //NProgress.start();
            var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
            let base='';
             axios.post(`${base}/login`,loginParams).then( res => {console.log(res);return res.data} ).then(data => {
              this.logining = false;
              //NProgress.done();
              let { msg, code, user } = data;
              if (code !== 200) {
                this.$message({
                  message: msg,
                  type: 'error'
                });
              } else {
                sessionStorage.setItem('user', JSON.stringify(user));
                this.$router.push({ path: '/table' });
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

這是一個login檢測的函數，主要說這一小部分：

axios.post(`${base}/login`,loginParams).then( res => {return res.data} ).then(data => {this.logining = false;if (data.code !== 200) {
                this.$message({
                  message: data.msg,
                  type: 'error'
                });
              } else {
                sessionStorage.setItem('user', JSON.stringify(data.user));  //這裏是在sessionStorage中存儲用戶信息，這個是必定要有的！
                this.$router.push({ path: '/table' });  //這裏是配置請求完成後或登陸完成後跳轉到的路徑
              }
            });

 

這裏axios先post發送請求，請求發送出去後會獲得一個response，就是回調函數中的參數res，consolelog發現這個res是個json，裏面包含以下內容：

通常而言有用的是data這個對象，因此第一個回調函數返回res.data，第二個回調函數就會利用返回的data對象中的各個屬性來判斷response狀況，包括經常使用的msg、code、user等信息。

總結：

使用axios進行login登陸驗證：1.發送axios.post（ url, { params } ）.then(response =>{return res.data} ) .then(data => {...} 得到response下的data對象

　　　　　　　　　　　　　 2.根據得到的data對象判斷login請求是否正確

　　　　　　　　　　　　　 3.若請求完成，即data.code==200，須要在sessionStroage中寫入用戶信息（data.user），並配置跳轉路徑

只是很基礎的axios入門，若有錯誤，還請指正！