axios請求

get請求:

      this.$axios.get("http://www.wwtliu.com/sxtstu/news/juhenews.php",{php

        params:{//是否添加.get都是使用get方式發送請求,axios的默認方式前端

          type:"junshi",vue

          count:30ios

        }axios

      })api

      .then(res => {跨域

        this.newsData = res.data;app

      })vue-resource

      .catch(error => {})post

 

post請求:

      form-data:?name=iwen&age=20

      x-www-form-urlencoded:{name:"iwen",age:20}

      注意:axios接受的post請求參數的格式是form-data格式

      this.$axios.post("http://www.wwtliu.com/sxtstu/blueberrypai/login.php",

             qs.stringify({

                    user_id:"iwen@qq.com",

                    password:"iwen123",

                    verification_code:"crfvw"

             }))

  .then(res => {})

  .catch(error => {})

 

全局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';

全局攔截器

axios.interceptors.request.use(function (config) {

    //在發送請求以前的處理

    if (config.method == "post") {//處理post請求

        config.data = qs.stringify(config.data);

    }

    return config;

}, function (error) {

    //對請求錯誤處理

    return Promise.reject(error);

});

//響應攔截器

axios.interceptors.response.use(function (response) {

    //對響應數據處理

    return response;

}, function (error) {

    //對響應錯誤處理

    return Promise.reject(error);

});

 解決跨域問題

//解決跨域問題(與config中index.js一塊兒配置)

//main.js添加代碼

Vue.prototype.HOST = '/api'

//index.js文件中在dev:{}中添加

proxyTable: {

    "/api": {

        target: "http://localhost:8080",

        changeOrigin: true,

        pathRewrite: {

            '^/api': ''

        }

    }

},

//使用時

var url = this.HOST + "/illness/GetHospitalList";

axios.get(url, {}).then(response => {}).catch(error=>{});

//開發時建議不在前端進行跨域處理,由於在打包合併時須要處理的請求url過多,

//建議使用axios默認配置中的默認url進行配置,打包合併時只須要修改一處便可

//跨域與默認配置不可用時使用,使用跨域時須要註釋掉默認配置

vue-resource使用

this.$http.get(url).then(response => {

   console.log(response.body);

}).catch(error => {

   console.log(error);

})

相關文章
相關標籤/搜索