axios入门笔记

Posted bbct-1993

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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入门,如有错误,还请指正!

 

以上是关于axios入门笔记的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

VSCode自定义代码片段14——Vue的axios网络请求封装

axios入门使用笔记

axios入门使用笔记

AngularJS入门学习笔记一

Unity Shader入门精要学习笔记 - 第5章 开始 Unity Shader 学习之旅