Axios

What is

Axios is promise based HTTP client for the browser and node.js.

Promise

Installing

  • Using npm:
$ npm install axios
  • Using bower:
$ bower install axios
  • Using cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Example

GET

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

POST

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

注意

实际使用时，axios 使用post方式传递参数，后端接受不到

  • 在 main.js 里 设置配置，修改 Content-Type
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = axios;
  • 在组件vue里
const url ='http://****你的接口****';
var params = new URLSearchParams();
params.append('key1', 'value1');       //你要传给后台的参数值 key/value
params.append('key2', 'value2');
params.append('key3', 'value3');
this.$axios({
    method: 'post',
    url:url,
    data:params
}).then((res)=>{
});

实际问题

post 传递 json

前端传递参数 json，但是因为 json 中包含特殊字符 '，导致传递失败。

去网上查询，说是使用 encodeURIComponent，但是实际测试无效，后来验证使用 formdata

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。

其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。

如果表单 enctyp e属性设为 multipart/form-data，则会使用表单的 submit() 方法来发送数据，从而，发送数据具有同样形式。

  • 实例
let formdata = new FormData();
formdata.append('partyIds', partyIds);

API.pms.traderList(formdata).then(res => {
  this.counterTrader = res.data;
}).catch(res => {
  this.$Message.error('获取对手方交易员出错!');
});

其中交易员列表函数为：

export function traderList(params) {
  return request({
    url: '/pms/trader/traders',
    method: 'post',
    data: params
  });
}

参考资料

https://blog.csdn.net/qq_27409289/article/details/71156459

https://blog.csdn.net/jluzh04140717/article/details/70193932