Axios

一、axios

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js 中

特点：

-从浏览器中创建XMLHttpRequests

-从 node.j创建http请求

-支持Promise API（then）

-拦截请求和响应(可以取消请求)

-转换请求数据和响应数据

-取消请求

-自动转换JSON 数据(自动转换是一个缺点)

-客户端支持防御XSRF (跨网站请求伪造:

https://en.wikipedia.org/wiki/Cross-sito_request forgery)

• 注意：

1.axios.post与的参数和头部信息默认按照post的默认值覆盖，所以传给后台的信息,将会以json字符串的形式传递。

2.可以使用qs对象:

-qs主要有两个方法:

-方法一:将对象序列化,多个对象之间用&拼接(拼接是由底层处理，无需手动操作) qs.stringify(json对象)转换成查询字符串

-方法二:将序列化的内容拆分成一个个单一的对象qs.parse()转换成json对象

-安装:npm install qs -D

-使用import qs from 'qs'

三、axiosAPI

-axios配置

1.axios ({参数，...})

2.可以通过向axios传递相关配置来创建请求，config以对象形式进行配置，参数如下：

-url,用于请求的服务器url

-Method,创建请求时使用的方法

-baseURL, `baseURL` 将自动加在`url` 前面，除非`url` 是一个绝对URL.(拼合成一个完成的url)

-data,作为请求主体被发送的数据，json对象格式

-timeout, 指定请求超时的毫秒数(0表示无超时时间，如果请求花费了超过`timeout` 的时间，请求将被中断

-responseType:‘json’，表示服务器响应的数据类型， 可以是‘arraybuffer’，"blob' ，document ，json , text, 'stream' (默认是son)

json格式，必须转换成查询字符串格式

四、vue注意点：

1.采用组件化模式，提高代码复用率，且让代码更好维护。

2.Params:版本不一样，兼容性不一样！兼容性的用的是qs，

 

 3.代理服务器参数：（地址和端口）

了解：Vue-resource！

 

示例：

<template>
  <div class="header0">
    <table>
      <caption>
        商品界面
      </caption>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>生产时间</th>
          <th>失效时间</th>
          <th>图片</th>
          <th>价格</th>
          <th>折扣</th>
          <th>购买</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(v, i) in ps" :key="i + 'link'">
          <td>{{ v.id_coach }}</td>
          <td>{{ v.name_coach }}</td>
          <td>{{ v.dage_coach }}</td>
          <td>{{ v.tage_coach }}</td>
          <td><img :src="baseurl + v.path_coach" alt="" class="img1" /></td>
          <td>{{ v.type_coach }}</td>
          <td>{{ v.honor_coach }}</td>
          <td><input type="button" value="购买" @click="buy2(i)" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "Show",
  data() {
    return {
      ps:[],
      baseurl: "http://www.qhdlink-student.top/",
    };
  },
  computed: {
    // ps: function () {
    //   return this.$store.state.pss;
    // },
  },

  mounted(){
    axios({
      url: "http://www.qhdlink-student.top/student/coacha.php",
      method: "POST",
      data: { username: "cty", userpwd: 12345678, userclass: 67, type: 2 },
      transformRequest: [
        function (data) {
          return qs.stringify(data);
        },
      ],
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
    }).then((value) => {
      for (let i in value.data) {
        this.ps.push(value.data[i]);
      }
      this.setpss(value.data);
    });
  },
  methods: {
    buy2: function (a) {
      this.$store.commit("buy1", a);
    },
    setpss(a) {
      this.$store.commit("changepss", a);
    },
  },
};
</script>

<style>
.header0 {
  width: 50%;
  height: 750px;
  float: left;
  background: rgb(241, 240, 181);
}
.img1 {
  width: 100px;
  height: auto;
}
</style>