Axios 的基本用法_axios导入vue

1. Axios是什么

        Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单点说：就是前端往后端传数据的 ，promise 是ES6新增的异步处理对象，这里不多说。有兴趣的可以看着个网址：

promise是什么

2. Axios 的安装

首先查看 vue工程中的package.json 文件的 devDependencies 中有没有

"axios": "^1.4.0"   类似的节点，没有要安装 （别断网了）

在工程根目录的CMD中键入： npm install axios 

3. Axios导入vue工程

在vue页面的 script 节点中写如下代码（注意写在最上面）：

 import axios from 'axios';

 import qs from 'qs';

4. 用get 方式发送数据

let param = {
    params: {
      ID: 12345
    }
  }; // 这是要传的参数
let url = '/house/testPage' ; // 这是后端的具体地址，注意后端返回的必须是 JSON格式的数据。    axios.get(url, param)
              .then(function (response) {
                  alert( JSON.stringify(response.data) ); // response.data就是后端返回的JSON对象
              })
              .catch(function (error) {
                  console.log(error);
              });

5.用post方式发送数据

和get方式有点不一样,要用 qs转换一下。

let sobj= {
      ID: 12345
  };
let url = '/house/testPage' ;
let param = qs.stringify(sobj);
 axios.post(url, param)
              .then(function (response) {
                  alert(JSON.stringify(response.data));// response.data就是后端返回的JSON对象
              })
              .catch(function (error) {
                  console.log(error);
              });

6.文件上传

文件上传和get ,post都不一样。

1.首先html上的表单要求（注意红色部分）：

<form id="myform" action="javascript:void(0)" method="post" enctype="multipart/form-data">

            <p>
                    文件1:<input type="file" name="marr"/><br/>
                    文件2:<input type="file" name="marr"/>
            </p>
            <p><button id="sub">注册(文件上传测试)</button></p>
        </form>

2.要求先用 FormData 对象封装表单后才能发送：

const formData = new FormData( document.getElementById("myform") );

let urls = '/house/uploadFile2' ;

             axios({
              url: urls, 
              method: 'post',
              headers: {"Content-Type":"multipart/form-data"},
              data: formData
             })
              .then(function (response) {
                // 后端返回的JSON对象中包含有code 属性下面代码才生效
                if(response.data.code > 0){
                    console.log("文件上传成功。");
                }else{
                    console.log("文件上传失败！！");
                }
             })
              .catch(function (error) {
                console.log(error);
             });

7. Axios 后端返回对象（response）的具体结构

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

一般用data(这个就是传回的json数据对象)，status 是HTTP状态码也有用，其它的看具体情况。

8.拦截器interceptors

在请求或响应被 then 或 catch 处理前拦截它们。

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果你想在稍后移除拦截器，可以这样

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

注意这个是请求拦截和拦截移除，响应请把 request 改为 response 。

9.执行多个并发程序

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成，acct, perms 就是每个方法返回的 response
  }));

10.补充一下中文的学习网址

Axios的方法是很多的，本文只能讲基本用法，深入研究请大家看一下网址

Axios中文帮助