axios基础和封装

一、简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest

• 从 node.js 发出 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防止 CSRF/XSRF

二、安装

使用npm

//安装

npm install axios --save

​
//导入

import axios from "axios"

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、axios返回的数据

• config 请求的时候附带的配置参数

• data 后端返回的数据

• headers 请求头 里面包含发送给后端的格式 application/json;charset=UTF-8

• request ajax请求

• status 返回的状态码

• statusText 返回的状态文字

四、使用axios请求数据

（1）发送GET不带参数请求

import axios from "axios";
export default {
  methods: {
    init(){
      axios.get('http://www.bufantec.com/api/douban/movie/in_theaters')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  },
  created () {
    this.init();
  }
}

（2）get带参数请求

import axios from "axios";
export default {
  methods: {
    init(){
      axios.get('http://www.bufantec.com/api/douban/movie/in_theaters?start=1&limit=10')
      // get请求附带参数的另一种写法
      /* axios.get('http://www.bufantec.com/api/douban/movie/in_theaters',{
        params:{
          start:2,
          limit:10
        }
      }) */
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  },
  created () {
    this.init();
  }
}

 

（3）post请求

 axios.post('http://order.gjw.com/Order_Api/GetValiCode')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

（4）post 带参数请求

axios.post('http://order.gjw.com/Order_Api/GetValiCode',{
        Mob:18311111111,
        validcode:"815961",
        use:"regiVali"
      } )
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);