axios的一些配置

1. 这个是axios基本的配置 

@在接口index文件中

// 导入axios模块（留心：必须先通过 cnpm i axios -S
import axios from 'axios'
import {message } from 'antd'

// 创建request对象（baseURL配置、timeout、headers配置...

// process是node中全局变量
// cnpm run serve  ->  process.env.NODE_ENV -> development
// cnpm run build  ->  process.env.NODE_ENV -> production
const isDev = process.env.NODE_ENV == 'development'

const request = axios.create({
    // baseURL: 'http://kg.zhaodashen.cn/v2/'
    // 思考：实战就一个接口网址，还是n个
    // 回答：必定是多个
    // 原因：开发服务器、线上服务器
    baseURL: isDev ? 'http://kg.zhaodashen.cn/v2/' : 'http://zhaodashen.cn/v2/',
    timeout: 5000,
    headers: {   
        token: localStorage.getItem('token') || 'adf7cbdcdc62b07d94f86339e5687ca51'
    }
})
 

// 添加请求拦截器: 这是向后台服务器发起的ajax请求 （统一加请求loading等
service.interceptors.request.use((reqconfig) => {
    reqconfig.withCredentials = true;
    return reqconfig;
}, (error) => {
    return Promise.reject(error);
});

// 添加响应拦截器 （统一关闭loading等
service.interceptors.response.use((response) => {
    return response;
}, (error) => {
    if (error.response && error.response.status === 401) {
        message.error("无权限操作，请联系tvs运维.")
    }
    return Promise.reject(error);
});
 
 

// 导出request对象 其他文件导入使用
export default request

2. 这个是axios配置一个接口的配置 

@在接口index文件中

import axios from "axios"
import qs from "qs"

axios.defaults.baseURL= "http://kg.zhaodashen.cn/v2/"

//拦截器统一加token

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
config.headers["token"] = localStorage.getItem("token") || "adf7cbdcdc62b07d94f86339e5687ca51"   //固定语法 
    // 在发送请求之前做些什么
 
    return config;
  },
   function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

//商品模块  创建商品
export const createGoodsstateApi = datas=>{
  return axios.post("goods/create.php",qs.stringify(datas))
  .then(res=>res.data)
}

@在vue文件中

<script>
import {createGoodsstateApi}  from "@/api"

// methods

   submitForm(formName) {
          this.$refs[formName].validate((valid) => { // elementUI语法--表单校验成功
             if (valid) {
                createGoodsstateApi({
                    goods_name:this.goosdata.goods_name,
                    goods_number:this.goosdata.goods_number,
                    market_price:this.goosdata.market_price,
                    shop_price:this.goosdata.shop_price,
                    cat_id:this.goosdata.cat_id,
                    thumb:this.goosdata.thumb,
                }).then(res=>{
                   if(res.meta.state == 201){
                       this.$message.success(res.meta.msg )
                       this.jump("/goods")

                   } else{
                       this.$message.error(res.meta.msg )
                   }
                })
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    }
</script>

 关于 qs 

/*
在项目中使用命令行工具输入：npm install qs
安装完成后在需要用到的组件中：import qs from 'qs’
qs.parse()是将URL解析成对象的形式
qs.stringify() 将对象序列化成URL的形式以&进行拼接.
*/

let obj= {
 method: "query_sql_dataset_data",
 projectId: "85",
 appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
 datasetId: " 12564701"
  };
Qs.stringify(obj);

 JSON.stringify(param)

{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}

Qs.stringify(param)
uid=cs11&pwd=000000als&username=cs11&password=000000als