【Vue入门】利用VueCli搭建基本框架--创建Http帮助类，在登陆页面请求api数据并存储token（四）

上节主要说了登陆页面的布局

这节主要说Http类的简单封装以及在登陆页面调用api并将结果返回存储

一、封装http帮助类，代码如下：

//引入url常量类
import urls from './urls.js'
// 导入axios请求封装类
import axios from 'axios'
// 导入element的message及messagebox方法
import { Message } from 'element-ui'  
// 创建实例 create an axios instance
const service = axios.create({
    baseURL: urls.BaseUrl, //process.env.VUE_APP_BASE_API, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 2500 // 设置默认请求超时时间2.5秒
  })

// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    var code = response.data.Code
    var message = response.data.Message
    if(code !== 10000){
        Message({
          message: message || '收到请求后比较code值出现异常，请检查大小写', // 消息内容
          type: 'error', // success，error，info，warning 弹框类型
          duration: 5 * 1000 // 显示时间
        })
    }else{
      console.log('请求正确，response值为：',response)
      //直接返回成功的结果集
      return response.data.Result;
    }
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default {
    service:service,
}

使用了axios这个第三方的插件，创建了实例并初始化BaseUrl（官网）、另外利用提供的拦截请求和响应，对返回的数据做了处理。如果请求失败则弹框提醒，成功则获取实际Result对象返回

我的Api返回结果示例如下：

二、在login页面调用api请求 

submitForm()提交方法代码

//提交方法
            submitForm(){
                //调用form表单的validate方法，对所有元素进行校验
                this.$refs.form.validate((valid)=>{
                    if (valid) {
                        console.log('输入的账号为：' + this.formInfo.name);
                        console.log('输入的密码为：' + this.formInfo.pass);
                        
                        this.sendRequest()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },

 

sendRequest()代码

//发送请求
            async sendRequest(){
                let result
                let data = {
                    stu_no: this.formInfo.name,
                    pwd: this.formInfo.pass,
                };
                let url = this.$urls.Login;
                console.log('url是：' + url);
                //调用post
                await this.$request.service.post(url,data)
                    .then(response=> {
                        console.log('登陆页面拿到的response是',response);
                        console.log('登陆页面拿到的token是' + response.token);
                        //设置token
                        window.sessionStorage.setItem('token',response.token);
                        //设置跳转路由
                        this.$router.push({ path: '/Home' });
                    })
                    .catch(function (error) {
                        console.log('登陆页面错误的消息为：',error);
                    })
                return result
                
  }

PS：如果没有Api这里直接模拟写入一个token值然后调用路由跳转到Home也是可以的

输入用户名、密码后台做简单判断然后跳转页面就能看到Home页面了，如下：