Axios

Axios

• 特点：支持客户端和服务端使用、不支持JSONP、支持拦截器、支持Promise语法

1. 安装：cnpm i axios —save

2. 配置：

   //main.js
   import axios from 'axios';
   //挂载到Vue的原型上
   Vue.prototype.$axios = axios;
   

3. 使用：

   mounted(){
   //ajax数据请求通常放在mounted钩子函数里
   this.$axios({
   url:'请求地址',
   method:'请求方式',
   params:{GET请求参数},
   data:{POST请求参数}
   }).then()
   }
   

4. 特殊点：

   1. axios默认请求的header里面的content-type:’application/json’
   2. jquery默认请求的header里面的content-type:’application/x-www-form-urlencoded’

set请求

// 在api文件下创建sms.js文件
import axios from 'axios'

export const getWeather = (data) => {
    return axios({
        url:'请求地址',
	method:'请求方式',
        params:{
            showapi_appid:'',
            showapi_sign:''
            data
        }
    })
}


``````````````````
index.vue下写入
import {getWeather} from 'js文件路径'
mounted(){
    getWeather('参数').then()
}

post请求

• application/x-www-form-urlencoded

// 在api文件下创建sms.js文件
import axios from 'axios'

export const getWeather = (XX) => {
    return axios({
        url:'请求地址',
	method:'请求方式',
        data:{
            showapi_appid:'',
            showapi_sign:''
            XX
        }
    })
}

• 如果后端采用的是’’application/json’,那么axios的POST请求需要特殊处理：

// 方法一
// 在api文件下创建sms.js文件

import axios from "axios";

function formatterDateTime() {
  var date = new Date()
  var month = date.getMonth() + 1
  var datetime = date.getFullYear()
    + ""// "年"
    + (month >= 10 ? month : "0" + month)
    + ""// "月"
    + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
    + ""
    + (date.getHours() < 10 ? "0" + date.getHours() : date.getHours())
    + ""
    + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes())
    + ""
    + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
  return datetime;
}

export const sendSMS = (mobile, code) => {
  var data = new URLSearchParams();
  data.append('showapi_timestamp', formatterDateTime())
  data.append('showapi_appid', '799357')
  data.append('showapi_sign', '18f7146773404fdaae779b8a130c0701')
  data.append('tNum', '')
  data.append('tNumAlias', '示例模板1')
  data.append('mobile', mobile)
  data.append('content', JSON.stringify({ name: '蜗牛', code }))
  data.append('big_msg', '')
  return axios({
    url: 'http://route.showapi.com/28-1',
    method: 'post',
    data
  })
}

// 方法二：使用qs模块
1. 安装其qs模块
2. 在main.js中引入qs模块，并添加到Vue原型中
	...js
		import qs = from 'qs';
		Vue.prototype.$qs = qs;
	...
3. 使用qs    

export const sendSMS = (mobile, code) => {
  var data = {
    "showapi_timestamp": formatterDateTime(),
    "showapi_appid": '799357', //这里需要改成自己的appid
    "showapi_sign": '18f7146773404fdaae779b8a130c0701',  //这里需要改成自己的应用的密钥secret
    "tNum": "",
    "tNumAlias": "示例模板1",
    "mobile": mobile,
    "content": JSON.stringify({ name: '蜗牛', code }),
    "big_msg": "",
  }

  return axios({
    url: 'api/28-1',
    method: 'post',
    data: qs.stringify(data)
  })
}

html部分，两种方法无差别

<!-- 调用api -->
<template>
  <div>
    <input type="text" v-model="sms" /> <button @click="send">提交</button>
  </div>
</template>

<script>
import {sendSMS} from 'api/sms.js'
export default {
  name:'phone',
  data(){
    return{
      sms:''
    }
  },
  methods:{
    async send(){
      var m = this.sms;
      var r = this.random(999999,100000)
      var res = await sendSMS(m,r)
      console.log( res.data);
    },
    random(min,max){
      return  parseInt(Math.random()*(max-min)+min)
    }
  }
}
</script>
<style scoped lang="scss"></style>

跨域（Proxy代理【解决跨域问题】）

• 写在vue.config.js文件的module.exports下

  devServer: {
    // 目的：跨域
    proxy: {
      //例如：查询天气的URL改成： /api/28-1?area=西安
      //只要是以api开头的请求地址，都去访问http://route.showapi.com/
      '/api': {
        target: 'http://route.showapi.com/',
        changeOrigin: true,
        pathRewrite: { "^/api": "" }
      },
      //自动变成：http://route.showapi.com/28-1?area=西安
      '/movie': {
        target: 'https://api.douban.com/v2',
        changeOrigin: true,
        pathRewrite: { "^/movie": "" }
      }
    }
  },