Vue 中使用 axios（十一）

cnpm install axios --save

import Axios from "axios"
Vue.prototype.$axios = Axios

<template>
  <div id="app">
     
  </div>
</template>
<script>
import Learn from "./components/Learn"
// 引入 qs ，这个库是 axios 里面包含的
import Qs from ‘qs‘

export default {
  name: "App",
  components: {
    Learn   // 注入
  },
  data() {
    return {
      
    }
  },
  mounted() {
    // get 请求
    this.$axios.get("/api/student/get/1")
    .then(res => {
      console.log(res.data)
    })
    .catch(error => {
      console.log(error)
    })

    // get 请求
    this.$axios.get("/api/student/getStudent", {
      params: {
        id: 1
      }
    })
    .then(res => {
      console.log(res.data);
    })
    .catch(error => {
      console.log(error);
    });

    // post 请求，默认的 content-type 为 application/json
    this.$axios.post("/api/student/addStudent", {
      stuId: 20,
      stuName: "Python"
    })
    .then(res => {
        console.log(res.data)
    })
    .catch(error => {
        console.log(error)
    })

    // post 请求,QS 模块会将请求参数的 content-type 转换为 application/x-www-form-urlencoded
    this.$axios.post("/api/student/addStudent", Qs.stringify({
      stuId: 21,
      stuName: ‘Linux‘
    }))
    .then(res => {
      console.log(res.data)
    })
    .catch(error => {
      console.log(error)
    })

  }
  
};
</script>

// 跨域配置
proxyTable: {
  ‘/api‘: {
    target: ‘http://localhost:8087‘,  // 接口域名
    changeOrigin: true,  // 是否跨域
    pathRewrite: {
      ‘^/api‘: ‘‘   // 需要rewrite重写的
    }
  }

}

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) {
    // 两个请求现在都执行完成
  }));

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

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

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

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

  // `config` 是为请求提供的配置信息
  config: {}
}

axios.get(‘/user/12345‘)
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

// main.js
axios.defaults.baseURL = ‘https://api.example.com‘;
axios.defaults.headers.common[‘Authorization‘] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;

 // main.js：
 Vue.prototype.HOST = "/api"
 // 访问：
 var url = this.HOST + "/studnet/get/1"

// 添加请求拦截器
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);
  });

axios.get(‘/user/12345‘)
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log(‘Error‘, error.message);
    }
    console.log(error.config);
  });