【Vue】axiox基本使用

爱被打了一巴掌 2021-11-16 08:22 366阅读 0赞

# 安装依赖 #

npm install axios

# 在全局配置文件main.js引入 #

import axios from 'axios'
    
    // 将axios绑定到全局Vue原型上
    Vue.prototype.$axios = axios
    
    // 全局的 axios 默认值
    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';

# 使用 #

this.$axios.get('api',{
          params:{
            id:1
          }
        }).then(function(res){
          console.log(res)
        }).catch(function(error){
          console.log(error)
        })

this.$axios.post('api',{
          id:2,
          username:'李四'
        }).then(function(res){
          console.log(res)
        }).catch(function(error){
          console.log(error)
        })

## 别名方法 ##

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)
    axios.get(url[, config])
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])

## 并发请求 ##

## 相应结构：response ##

{
      // `data` 由服务器提供的响应
      data: {},
    
      // `status` 来自服务器响应的 HTTP 状态码
      status: 200,
    
      // `statusText` 来自服务器响应的 HTTP 状态信息
      statusText: 'OK',
    
      // `headers` 服务器响应的头
      headers: {},
    
      // `config` 是为请求提供的配置信息
      config: {}
    }

# 拦截器 #

*  请求拦截器的作用比如配置header、转换数据等
 *  响应拦截器的作用比如token过期进行登录跳转等

import querystring from 'querystring'
    
    // 在执行请求之前执行此方法
    axios.interceptors.request.use(function (config) {
      // 在post提交时将data转换为json字符串
      if(config.method === "post"){
        config.data = querystring.stringify(config.data);
      }
      return config;
    }, function (error) {
      return Promise.reject(error);
    });
    
    // 在执行axiox回调函数之前执行此方法
    axios.interceptors.response.use(function (response) {
      switch (res.data.code) {
         case 401: router.push({path: '/login'});
         ......
      }
      return response;
    }, function (error) {
      return Promise.reject(error);
    });

# 跨域 #

配置config/index.js，proxyTable

module.exports = {
      dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/api': {
            target: 'http://localhost:8881',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },
        
        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        ......

在main.js中配置拦截的路径

Vue.prototype.HOST = '/api'

> 注意：修改配置文件后，需要 npm run dev 重启项目才能生效

使用

this.$axios.get(this.HOST + '/users',{
          params:{
            id:1
          }
        }).then(function(res){
          console.log(res)
        }).catch(function(error){
          console.log(error)
        })