vue---發送數據請求的一些列的問題

使用vue作數據請求，首先考慮的是封裝請求方法request.js

import axios from 'axios'
import Qs from 'qs'

// 建立一個axios實例
const service = axios.create({
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',    
    // 'content-type': 'application/json;charset=UTF-8',
    // 'x-token': 'one' 
  },
  // baseURL: 'http://dianphp.fyz.com',
  baseURL: '/',
  method: 'post',
  transformRequest:[function(data){
    return Qs.stringify(data)
  }],
  withCredentials: true,
  timeout: 5000
})

// 添加請求攔截器
service.interceptors.request.use(config => {
  // 在發送請求以前作某事，好比說 設置token
  // config.headers['token'] = 'token';
  config.headers['x-token'] = 'xxxxxxxxxxxxxxxxxxx';
  return config;
}, error => {
  // 請求錯誤時作些事
  return Promise.reject(error);
});

// 添加響應攔截器
service.interceptors.response.use(response => {
  const res = response.data;
  // // 若是返回的狀態不是200 就主動報錯
  // if(res.state != 200){
  //   return Promise.reject(res.message || 'error')
  // }
  return res;
}, error => {
    return Promise.reject(error.response.data); // 返回接口返回的錯誤信息
})

export default service

這裏須要注意的是baseURL，不要寫服務器的地址，若是這裏配置服務器的地址就會報跨域的錯誤

這裏解決跨域的問題是在 config 目錄下的 dev 裏面進行配置proxyTable：

proxyTable: {
    '/api': {
        target: 'http://dianphp.fyz.com',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/api'
        }
    }
},

其次是在開發過程當中後存在OPTIONS跨域的問題，我使用的是thinkphp，多是thinkphp的路由問題，配置的時候須要配置 options請求

return [
    // 'api/user/login' => 'api/user/login',
    'api/user/login' => ['api/user/login',['method' => 'post|get|options']],
];

而後請求參數裏面添加 header：

public function login(){
    header('Access-Control-Allow-Origin: *');
    $list = $this->getlayuilist();
    return $list;
}

request.js的使用方法：

一、新建 api/role.js

role.js

import request from '@/utils/request'

class RoleService{
  getRoutes(data){
    return request({
      url: '/api/user/login',
      method: 'post',
    })
    // return request({
    //   url: '/api/user/login',
    //   method: 'post',
    //   data:data
    // })
  }

  getRoles() {
    return request({
      url: '/roles',
      method: 'get'
    })
  }

  addRole(data) {
    return request({
      url: '/role',
      method: 'post',
      data
    })
  }

  updateRole(id, data) {
    return request({
      url: `/role/${id}`,
      method: 'put',
      data
    })
  }

  deleteRole(id) {
    return request({
      url: `/role/${id}`,
      method: 'delete'
    })
  }
}

export default new RoleService()

具體組件的使用：

import roleApi from '@/api/role'

使用方法：

roleApi.getRoutes().then(res => {
  console.log(res);
  console.log('請求成功');
})