学习笔记之ajax

一、相关（vue）

1.axios.js
安装：npm install axios --save
使用：
①可以封装在https.js(文件名自定义)文件中，也可以直接使用；
②在vue入口文件中引入封装文件
③使用；this.fetchPost;this.fetchGet;
④请求头添加自定义数据；
在服务端的响应头的Access-Control-Request-Headers中添加相同的key；
例：
前端：axios.defaults.headers[“token”] = “123456789”;
后端：header(‘Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept,token’);
token为前端发送的自定义数据的key。

import https from './https';

Vue.use(https);

import axios from 'axios';
import qs from 'qs';

axios.defaults.timeout = 5000;                        //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
axios.defaults.baseURL = 'http://192.168.1.100';   //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
  //在发送请求之前做某件事
  if(config.method  === 'post'){
    config.data = qs.stringify(config.data);
  }
 //可以在这添加http请求数据的加密
  return config;
},(error) =>{
  console.log('错误的传参')
  return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
  //对响应数据做些事
  //可以在这添加http请求返回数据的解密
  //var encryptor = new jsencrypt();
  //encryptor.setPublicKey(pu);
  //res.data = encryptor.encrypt(res.data);
  //console.log(res)
  if(!res.data.success){
    return Promise.resolve(res);
  }
  return res;
}, (error) => {
  console.log('网络异常')
  return Promise.reject(error);
});
//自定义vue全局方法fetchPost、fetchGet
export default {
  install(Vue)  {
    Vue.prototype.fetchPost = function(url, param) {
      return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
          .then(response => {
            resolve(response)
          }, err => {
            reject(err)
          })
          .catch((error) => {
            reject(error)
          })
      })
    };
    Vue.prototype.fetchGet = function(url, param) {
      return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
          .then(response => {
            resolve(response)
          }, err => {
            reject(err)
          })
          .catch((error) => {
            reject(error)
          })
      })
    };
  }
};

2.qs.js
安装：npm install qs
3.jsencrypt.js
安装：npm install jsencrypt
直接封装使用：

import jsencrypt from 'jsencrypt';

export function encrypt(publickey,data){
  var encryptor = new jsencrypt();
  encryptor.setPublicKey(publickey);
  return encryptor.encrypt(data);
}
export function decrypt(privatekey,data){
  var decryptor = new jsencrypt();
  decryptor.setPrivateKey(privatekey);
  return decryptor.decrypt(data);
}

export default {
  encrypt,
  decrypt
};

封装为vue全局方法

import jsencrypt from 'jsencrypt';

export default {
  install(Vue)  {
    Vue.prototype.encrypt = function(publickey,data){
      var encryptor = new jsencrypt();
      encryptor.setPublicKey(publickey);
      return encryptor.encrypt(data);
    };
    Vue.prototype.decrypt = function(privatekey,data){
      var decryptor = new jsencrypt();
      decryptor.setPrivateKey(privatekey);
      return decryptor.decrypt(data);
    };
  }
};

4.async await，异步等待
vue为例：

async created() {
    var params = { gameToday: null,gameNotice: null };
    await this.fetchPost('serve.php',params ).then((data) => {
      this.data = data.data;
      console.log(this.data)
    }).catch(err=>{
      console.log(err)
    })    
  },
  //效果为created的执行顺序与同步类似，会等待异步执行完成后才继续执行。