Vue axios 的简单使用

https://www.npmjs.com/package/axios

http://www.axios-js.com/docs/  axios 文档

简单使用：

https://www.jianshu.com/p/4ee31fdb78b6

https://blog.csdn.net/sleepwalker_1992/article/details/82829077

https://blog.csdn.net/weixin_34370347/article/details/91457480  vue2.0 axios post请求传参问题

全局设置公共参数：

Vue 请求传公共参数

https://www.jb51.net/article/135896.htm

Post请求 有坑

https://segmentfault.com/a/1190000012635783   axios post方法传参后台接收不到参数

1、安装 (qs是axios自带的，需引入 import qs from "qs")

npm install axios --save

原始axios请求：https://www.jianshu.com/p/f438914a2437

//原始axios请求
//页面引用：import axios from "axios";
// axios({
    //   method: "get",
    //   url: "http://www.tuling123.com/openapi/api",
    //   headers: {
    //     "Content-Type": "application/json"
    //   },
    //   params: {
    //     key: "c75ba576f50ddaa5fd2a87615d144ecf",
    //     info: "先有鸡还是先有蛋"
    //   }
    // })
    //   .then(response => {
    //     console.log(response.data);
    //   })
    //   .catch(error => {
    //     console.log(error.data);
    //   });

2、
axios.get('http://www.tuling123.com/openapi/api', {
    params: {
      key: "c75ba576f50ddaa5fd2a87615d144ecf",
        info: "先有鸡还是先有蛋"
    }
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error.data);
  });
3、
//create创建一个新的实例对象
const http = axios.create({
   url: 'http://jsonplaceholder.typicode.com/users',
   timeout: 3000,
   method: 'post'
});
//即可调用方法，和axios实例同
http.get('http://jsonplaceholder.typicode.com/users').then(Response=>{
   console.log(Response);
});
即：http.interceptors.request.use()

https://blog.csdn.net/Poppy_LYT/article/details/98172136  transformRequest在向服务器发送前，修改请求数据

transformRequest: [function (data) {
      // `transformRequest` 允许在向服务器发送前，修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      data.sex = 'man'
      return qs.stringify(data)
      // 结合create_headers里的内容，在这里又新增一条信息sex=man
      // 因此network中查看的结果是：name=xiaoming&age=12&sex=man
    }],

在vue-cli里.then里使用function就会乱了this指向

或者在请求外面定义 _this = this;

把.then里function改用es6箭头函数的写法就能正常传参了(下面是封装)

main.js 写入
import axios from 'axios';
import qs from "qs";// 配合qs模块转化post请求的参数,(qs是axios自带的，需引入 知乎）
Vue.prototype.$http = axios;// 在Vue原型链上绑定，就可以全局使用$http方法
Vue.prototype.$qs = qs;

axios.defaults.timeout = 5000;//响应时间
axios.defaults.headers.post["Content-Type"]="application/x-www-form/urlencoded";
//post头部设置后参数变成 name=dj&&age=20 这种形式
axios.defaults.baseURL ='http://www.rioyi.com/'; //设置默认域名
 
// 页面get请求调接口
this.$http.get('http://www.tuling123.com/openapi/api', {
        params: {
          key: "c75ba576f50ddaa5fd2a87615d144ecf",
          info: "先有鸡还是先有蛋"
        }
      }).then((response) => {
        console.log(response.data);
      }).catch((error) => {
        console.log(error.data);
      });
 
// POST传参有问题 当传递的参数只有一个时，{}可以省略 用 params 代替 data
let params = this.$qs.stringify({
        username: '测试',
        password: '123456',
});
this.$http.post("http://www.tuling123.com/openapi/api", params )
        .then(response => {
          console.log("数据来了post", response.data);
        })
        .catch(error => {
          console.log(error.data);
        });
 
// put请求调接口
this.$http.put('http://www.tuling123.com/openapi/api',
     {
        newpassword: '2'
     }
    ).then((response) => {
        console.log(response.data);
      }).catch((error) => {
        console.log(error.data);
      });

Vue 请求传公共参数 

npm i qs 
import qs from 'qs'
//推荐
axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token')
    const uid = localStorage.getItem('uid')
     // 判断请求的类型
     // 如果是post请求就把默认参数拼到data里面
     // 如果是get请求就拼到params里面
    if(config.method === 'post') {
        let data = qs.parse(config.data)
        config.data = qs.stringify({
            token: token,
            uid: uid,
            _t: Date.parse(new Date())/1000,
            ...data
        })
    } else if(config.method === 'get') {
        config.params = {
            token: token,
            uid: uid,
            _t: Date.parse(new Date())/1000,
            ...config.params
        }
    }
    return config;
  }, function (error) {
    return Promise.reject(error);
  })

//第二种 推荐第一种
axios.interceptors.request.use(
        config => {
            var xtoken = getXtoken()
            if(xtoken != null){
                config.headers['X-Token'] = xtoken
            }
            if(config.method=='post'){
                config.data = {
                    ...config.data,
                    _t: Date.parse(new Date())/1000,
                }
            }else if(config.method=='get'){
                config.params = {
                    _t: Date.parse(new Date())/1000,
                    ...config.params
                }
            }
            return config
        },function(error){
            return Promise.reject(error)
        }
    )

拦截： 

axios.defaults.timeout = 5000;
axios.defaults.headers.post["Content-Type"]="application/x-www-form/urlencoded"
axios.defaults.baseURL ='http://www.tuling123.com'; //填写域名

// http request 拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
	config =>{
   		const token = window.sessionStorage.getItem('Tk_token'); //获取存储在本地的token
   		const user_id=window.sessionStorage.getItem('Tk_user_id')

  //  config.data = JSON.stringify(config.data);
  //  config.headers = {
  //    'Content-Type':'application/x-www-form-urlencoded' //设置跨域头部,虽然很多浏览器默认都是使用json传数据，但咱要考虑IE浏览器。
  //  }
  //Post 请求设置全局参数有问题、get没有
	if(config.method=='get'){
		config.params = {
			token: token,
			_t: Date.parse(new Date())/1000,
			...config.params
		}
	}
	return config;
	},
	err =>{
		return Promise.reject(err);
	}
);

// http response 拦截器（所有接收到的请求都要从这儿过一次）
axios.interceptors.response.use(response => {
    if(response.status && response.status == 200){
            return response.data;
        }
}, error => {
    return Promise.reject(error.response)
})

2、在main.js中引入

在main.js中引入
import axios from 'axios';
Vue.prototype.$http = axios;
 
在Vue原型链上绑定，就可以全局使用$http方法

Vue.prototype.$http = axios;
this.$http.get("http://www.tuling123.com/openapi/api", {
    params: {
        key: "c75ba576f50ddaa5fd2a87615d144ecf",
        info: "先有鸡还是先有蛋"
    },
    header:{}
}).then((data) => {
    console.log(data);
    //success callback
}, (err) => {
    //error callback
})

POST
post请求比get请求复杂一点，首先降Content-Type格式为application/x-www-form-urlencoded，因为axios的post方法默认使用application/json格式编码数据，那么解决方案就有两种，一是后台改变接收参数的方法，另一种则是将axios的post方法的编码格式修改为application/x-www-form-urlencoded，这样就不需要后台做什么修改了修改后的参数形式 name=dj&&age=20 这样的

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//全局更改
import qs from "qs";//qs是axios自带的，需引入 import qs from "qs"
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
然后在组件中这样使用

export default {
    this.$axios({
      method: "post",
      //headers: { "content-type": "application/x-www-form-urlencoded" },//局部更改
      url: "http://localhost:3000/users/test",
      data: this.$qs.stringify({
        name: ""
      })
    }).then(res => {
      console.log(res);
    });
  }
};

配置的默认与自定义实例 解决跨域 https://www.cnblogs.com/anqiphp/p/10760874.html

vue出现 ccess to XMLHttpRequest at 'http://www.tuling123.com/‘

　　优先级别为：自定义实例>全局默认值>自带默认值(安装axios后 官方提供的)

注意了！！在修改完配置后，需要重新 npm run dev 一下，不然不起效果的~~

      自带默认值在：config/index.js 

 proxyTable: {
      '/api': {
        target: 'http://www.tuling123.com/', //域名接口  // 测试环境
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '' //需要重写的
      }
        }
    },


更改完以后，还需要我们把src/mains.js  中的

axios.defaults.baseURL = 'http://www.rioyi.com'  改成
axios.defaults.baseURL = '/api'
然后就可以了

这个只适合开发环境使用(本地)，因为开发环境的本地服务器，以及做好了代理的功能，无需去多余的操作。

2.自定义实例

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://www.rioyi.com',
  timeout:30000,
});

// 在实例已创建后修改默认值
axios.defaults.timeout = 5000;
axios.defaults.headers.post["Content-Type"]="application/x-www-form/urlencoded"
axios.defaults.baseURL ='http://www.rioyi.com'; //填写域名

生成环境的判断：

const api_root = process.env.NODE_ENV === "development" ? 'localhost:8000' : '103.22.43.12:8000';

const isProduction = process.env.NODE_ENV === 'production' ? true : false;
const connectionURL = isProduction ? 'http://is-test.aserweb.com:50102':'http://192.168.3.31:50099';

const http = axios.create({
    baseURL:connectionURL,
    timeout:30000,
})

http.defaults.baseURL = connectionURL;