Vue 单页面开发----实战二 Axios 请求封装

【一 】安装axios

(1)先cd进入到自己的工程目录下
(2)执行 npm install axios -S 安装即可

【二】封装axios 与后台进行交互

(1)建立http文件夹，建立http.js文件
(2)http.js文件内容：
import axios from 'axios';
import personInfo from '../store/personInfo';
import md5 from 'js-md5'
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog'

let Base64 = require('js-base64').Base64

// 设置请求超时时间
axios.defaults.timeout = 30000;
// 设置服务器域名
axios.defaults.baseURL = 'http://IP或域名/zlw/vue/mobile';

// 请求参数封装
const encodedData = function(e = {}, type){
  let personId = personInfo.getPersonId();
  let openId = personInfo.getOpenId();
  let nickName = personInfo.getNickName();
  let data = e;
  data.personId = personId; //== '' ? 'no_personId': personId;
  data.openId = openId;  // == '' ? 'no_openId' : openId;
  //data.nickName = nickName;
  console.log('请求参数:'+ JSON.stringify(data));
  data = Base64.encode(JSON.stringify(data));
  let md5str = md5(data).toLocaleUpperCase();
  return {
    'mds': md5str,
    'data': data
  }
}

//http request 拦截器
axios.interceptors.request.use(
  config => {
    config.url = config.url + '.vue';
    config.params = encodedData(config.params,1);
    //config.data = encodedData(config.data,2)
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }  
    //请求自动展示等待框
    Loading.open('加载中...');
    return config;
  },
  error => {
    //异常关闭等待框，并提示
    Loading.close();
    Toast( {mes: '网络错误', timeout: 2500, icon: 'error' });
    console.error('request error:'+ JSON.stringify(error));
    return Promise.reject(err);
  }
);

//http response 拦截器
axios.interceptors.response.use(
  response => {
    //请求结束自动关闭等待框
    Loading.close();
    console.log('返回结果：'+JSON.stringify(response.data));
    return response;
  },
  error => {
    //异常关闭等待框，并提示
    Loading.close();
    Toast({ mes: '网络错误', timeout: 2500, icon: 'error' });
    console.error('response error：'+ JSON.stringify(error));
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{params:params}).then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.post(url,data).then(response => {
      resolve(response.data);
    },err => {
      reject(err)
    })
  })
 }

 /**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data).then(response => {
      resolve(response.data);
    },err => {
      reject(err)
    })
  })
}

 /**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data).then(response => {
      resolve(response.data);
    },err => {
      reject(err)
    })
  })
}

(3)main.js添加内容：
import {post,fetch,patch,put} from './http/http'  //http服务


//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;

在这个http.js文件里简单的封装了一下axios请求，当页面发起请求时，自动展示等待框，请求结束后，自动关闭等待框。发生了异常自动关闭等待框，打印异常信息。然后在main.js里面声明定义定义即可。

 

【3】登陆页面的使用。

<template>
    <section class="yd-flexview">
      <section class="yd-scrollview">
     <yd-cell-group>
       <form>
        <yd-cell-item>
            <span slot="left">用户名：</span>
            <yd-input slot="right" :show-success-icon="false" :show-error-icon="false" v-model="personCode" max="20" placeholder="请输入用户名"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
            <span slot="left">密码：</span>
            <yd-input slot="right" type="password" v-model="password" placeholder="请输入密码"></yd-input>
        </yd-cell-item>
       </form>
    </yd-cell-group>   
    <yd-button size="large" type="primary" shape="circle" @click.native="getPersonInfo()">立即登录</yd-button>
      </section>
    </section>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      personCode: 'zhoulw',
      password: '123456'
    }
  },
  methods: {
    getPersonInfo: function() {
      if (this.personCode == '') {
        this.$dialog.toast({mes: '请输入账号',timeout: 1500});
        return false;
      }
      if (this.password == '') {
        this.$dialog.toast({mes: '请输入密码',timeout: 1500});
        return false;
      }
      let params = {
          'personCode': this.personCode,
          'password': this.password
      };
      this.$fetch('/accreditLogin.vue',params).then((response) => {
          if (response.errCode == '0') {
            // 存储登录人员的信息
            this.$personInfo.setPersonId(response.personInfo.personid);
            this.$personInfo.setHeadImgUrl(response.personInfo.headimgurl);
            this.$personInfo.setNickName(response.personInfo.nickname);
            this.$router.push({
              path: '/tabbar'
            });
          }else {
            this.$dialog.toast({mes: '账号或密码错误',timeout: 1500,icon: 'error'});
          }
      }); 
    }
  },
  mounted: function() {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

使用get请求: urll只需要写方法名即可，参数params可要可不要。

this.$fetch('/accreditLogin.vue',params).then((response) => {

// response就是后台返回的结果。

});

axios有个最大的问题就是跨域问题，但是这个后台也是我自己写的，所以跨域问题就在后台处理最方便。

response.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域

【4】效果，进行后台交互时自动展示等待框，交互完毕，自动关闭等待框。将后台返回的人员信息结果进行存储

                                             

这样首页就完成了，有些样式还有点问题，不过这不是重点。