axios的使用方法--即GET、POST、 OPTION 、请求拦截的使用

axios的使用方法–即GET、POST、 OPTION 、请求拦截的使用

• axios怎样在全局使用
• get传递参数和传递token
• post传递参数和token
• option的使用
• *拦截器的使用

---

axios怎样在全局使用

0 . 安装axios    npm/cnpm install axios --save
1 .在main.js将axios放在原型上   
	> 1.0 import axios from 'axios'
	> 1.1 Vue.prototype.axios = axios
2. 在你想用的vue文件中直接使用this.axios({method:'',url:''}).then().catch()直接使用

axios中GET请求的使用

axios. get(){
  this.axios({
    method:"GET",
    url:'https://api.github.com',
    params:{
       user:999,//get请求中使用params传递参数
      },
    header:{
        token:123,//使用token在header里面
      },
   }).then((response)=>{
       console.log(response.data)
   }).catch((err)=>{})
},

axios中POST请求的使用

0. 注意传参方式

axios. post(){
            this.axios({
              method:'POST',
              url:'https://api.github.com',
              data:{
                userId:12,
              },
              header:{
                token:123,
              },
            }).then((res)=>{
              console.log(res)
            }).catch((err)=>{})
          },

axios中option请求的使用

0. 注意传参方式

axios.defaults.baseURL = 'https://api.example.com';		//不用重复去写url
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;	//不用重复去传token
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios中拦截器的使用

0. 注意传参方式

this.axios.interceptors.request.use((config)=>{
           console.log('请求前的拦截');			
           console.log('loading.....');
           return config
         }),
         this.axios.interceptors.response.use((response)=>{
            console.log('响应拦截');//响应拦截
             return response;
	})