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请求的使用

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请求的使用
 

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中拦截器的使用
 

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